I am trying to explicitly set order for a stacked bar chart where the user has a set of events with their durations and then can set an event as a "zero" point on the y axis but the relationship between the events stays constant. This works fine when the zero point is at either end of the events (although I have to toggle the reversedStacks property for consistency) but in the middle one of the events will jump out of order to the end of the stack in spite of its index being explicitly set:
chart: {
height: 800,
type: 'column',
animation: {
duration: 0
},
},
title: {
text: 'Data Reimbursement'
},
xAxis: {
categories: [
"Japan<br />Drug 34<br />Treatment 5",
"United Kingdom<br />Drug 18<br />Traetment 7"
],
title: {
text: 'Country - Brand - Indcation'
},
},
yAxis: {
xmin: 0,
reversedStacks: true,
title: {
text: 'Days'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'black'
}
}
},
plotOptions: {
column: {
stacking: 'normal',
animation: {
duration: 0
},
dataLabels: {
enabled: true,
color: 'black',
style: {
textShadow: false,
textOutline: 0
}
}
}
},
credits: { enabled: false },
legend: {
show: true
},
series: [
{
"name": "Event 7",
"data": [
{
"y": 0,
"duration": 0,
"date": null,
"name": "Japan<br />Drug 34<br />Treatment 5",
"event": "Event 7",
"legendIndex": 7,
"index": 7
},
{
"y": 1,
"duration": 1,
"date": "2023-06-14",
"name": "United Kingdom<br />Drug 18<br />Traetment 7",
"event": "Event 7",
"legendIndex": 7,
"index": 7
}
]
},
{
"name": "Event 3",
"data": [
{
"y": 0,
"duration": 0,
"date": "2021-11-16",
"name": "Japan<br />Drug 34<br />Treatment 5",
"event": "Event 3",
"legendIndex": 3,
"index": 3
},
{
"y": 0,
"duration": 0,
"date": "2023-05-18",
"name": "United Kingdom<br />Drug 18<br />Traetment 7",
"event": "Event 3",
"legendIndex": 3,
"index": 3
}
]
},
{
"name": "Event 2",
"data": [
{
"y": -8,
"duration": -8,
"date": "2021-11-08",
"name": "Japan<br />Drug 34<br />Treatment 5",
"event": "Event 2",
"legendIndex": 2,
"index": 2
},
{
"y": -58,
"duration": -58,
"date": "2023-03-21",
"name": "United Kingdom<br />Drug 18<br />Traetment 7",
"event": "Event 2",
"legendIndex": 2,
"index": 2
}
]
},
{
"name": "Event 1",
"data": [
{
"y": 0,
"duration": 0,
"date": "2021-11-08",
"name": "Japan<br />Drug 34<br />Treatment 5",
"event": "Event 1",
"legendIndex": 1,
"index": 1
},
{
"y": 0,
"duration": 0,
"date": "2023-03-21",
"name": "United Kingdom<br />Drug 18<br />Traetment 7",
"event": "Event 1",
"legendIndex": 1,
"index": 1
}
]
},
{
"name": "Event 0",
"data": [
{
"y": -372,
"duration": -372,
"date": "2020-11-01",
"name": "Japan<br />Drug 34<br />Treatment 5",
"event": "Event 0",
"legendIndex": 0,
"index": 0
},
{
"y": -35,
"duration": -35,
"date": "2023-02-14",
"name": "United Kingdom<br />Drug 18<br />Traetment 7",
"event": "Event 0",
"legendIndex": 0,
"index": 0
}
]
}
]
what am I missing? Why won't the data with index 2 respect that order number? You can see in the jsfiddle that the stacking order doesn't follow the legend order - event 2 comes before event 0.
I expect the order to persist according to the index property in the series data