I'm new to chart-js, I'm implementing Stacks bar charts in an app. everything work perfect , but in case of negative number bars are shown on wrong positions. Click Here to see Image
In the Picture Downsell Should be before the churn , but on charts its displaying after the churn ,
Here is the code :
var ctx = document.getElementById('chartJSContainer').getContext('2d');
window.RevenueChangesByMonth = new Chart(ctx, {
"type": "bar",
"data": {
"labels": [
"Upsell",
"New",
"Downsell",
"Churn"
],
"datasets": [
{
"label": "New",
"type": "bar",
"order": 2,
"data": [
345,
842,
351,
155,
877,
705,
457,
224,
386,
689,
232,
332,
242,
142,
236,
342,
269,
232,
733,
247,
450,
306,
328,
345
],
"borderColor": "#a6cd95",
"backgroundColor": "#a6cd95"
},
{
"label": "Upsell",
"type": "bar",
"order": 1,
"data": [
586,
446,
868,
492,
324,
977,
301,
553,
254,
170,
919,
457,
226,
188,
356,
675,
136,
745,
646,
227,
821,
454,
315,
442
],
"borderColor": "#d3e7cb",
"backgroundColor": "#d3e7cb"
},
{
"label": "Downsell",
"type": "bar",
"order": -1,
"data": [
-13,
-64,
-94,
-66,
-24,
-37,
-33,
-81,
-75,
-18,
-26,
-18,
-34,
-94,
-97,
-82,
-93,
-15,
-51,
-47,
-22,
-90,
-54,
-68
],
"borderColor": "#fdcab6",
"backgroundColor": "#fdcab6"
},
{
"label": "Churn",
"type": "bar",
"order": -2,
"data": [
-72,
-81,
-23,
-66,
-88,
-100,
-34,
-71,
-96,
-10,
-47,
-42,
-1,
-64,
-70,
-33,
-74,
-88,
-33,
-22,
-55,
-5,
-93,
-15
],
"borderColor": "#ff6666",
"backgroundColor": "#ff6666"
}
]
},
"options": {
"animation": false,
"plugins": {
"title": {
"display": true,
"text": "Revenue Changes By Month"
},
"datalabels": {
"display": false
}
},
"tooltips": {
"mode": "index",
"intersect": true
},
"scales": {
"xAxes": {
"stacked": true
},
"yAxes": {
"stacked": true
}
},
"legend": {
"display": false
},
"maintainAspectRatio": false
}
});