When creating a chart with stacked columns using highcharts my series are added by default from top to bottom - the first added series is placed on top. I'd like to alter this behaviour so that the last added series was on top. I tried to change index and zIndex options, but then items in legend got reordered as well. Here is a simple example: http://jsfiddle.net/6bCBf/7/.
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [
{
name: 'base',
data: [10, 20, 30],
index:25,
zIndex:10
},
{
name: 'sec',
data: [30, 20, 10],
index:1,
zIndex:9
}
]
});
});
Is it possible to change stack order, but keep legend ordering? I'd just like to have legend ordered alphabetically, but items in chart added from bottom to top.
Yes that's most definitely possible.
What you are looking for is the parameter called legendIndex
.
This will allow you to specifiy the order of the items in the legend; hence being able to switch the stacked columns and not switch the legend items.
For example, you could do the following:
series: [
{
name: 'base',
data: [10, 20, 30],
index:1,
legendIndex:0
},
{
name: 'sec',
data: [30, 20, 10],
index:0,
legendIndex:1
}
]
In reaction to Hanoncs comment, it is possible to sort the order in a shared tooltip as in the legend by using a little hack. This hack goes as follows:
Use the property
yAxis: {
reversedStacks: false
},
Reverse the index
property of the added series. In the example above, series 'base'
then has index:0
and 'sec'
is given index:1
. The items in the shared tooltip will be sorted reversely.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With