Stacked Column with changed behaviour workaround- CanvasJS JavaScript Charts
Stacked Column with negative values changed behaviour as stackedArea workaround- CanvasJS JavaScript Charts
HTML
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
CanvasJS.ModifiedChart = function(chartContainer, options){
var y, stackedY, previousStackedDataPoints;
for(dataSeries of options.data){
if (dataSeries.type === "stackedColumn"){
if(typeof previousStackedDataPoints === "undefined")
dataSeries.type = "column";
else{
dataSeries.type = "rangeColumn";
dataSeries.toolTipContent = " {label}: {y[1]} ";
for(var i= 0; i < dataSeries.dataPoints.length; i++){
dataPoint = dataSeries.dataPoints[i];
y = dataPoint.y;
stackedY = typeof previousStackedDataPoints[i].y === "number" ? previousStackedDataPoints[i].y : previousStackedDataPoints[i].y[1];
dataPoint.y = [stackedY , stackedY + y];
}
}
previousStackedDataPoints = dataSeries.dataPoints;
}
}
options.dataPointWidth = 60;
return new CanvasJS.Chart(chartContainer, options);
}
var chart = new CanvasJS.ModifiedChart("chartContainer",
{
title:{
text: "Coal Reserves of Countries"
},
data: [
{
type: "stackedColumn",
dataPoints: [
{ y: 111338 , label: "USA"},
{ y: 49088, label: "Russia" },
{ y: 62200, label: "China" },
{ y: 90085, label: "India" },
{ y: 38600, label: "Australia"},
{ y: 48750, label: "SA"}
]
}, {
type: "stackedColumn",
dataPoints: [
{ y: 135305 , label: "USA"},
{ y: 107922, label: "Russia" },
{ y: -52300, label: "China" },
{ y: 3360, label: "India" },
{ y: 39900, label: "Australia"},
{ y: 0, label: "SA"}
]
}
]
});
chart.render();