JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
legend: {
cursor: "pointer",
},
data: [{
showInLegend: true,
type: "stackedColumn",
dataPoints: [
{ x: 10, y: 40 },
{ x: 20, y: 9 },
{ x: 30, y: 17 },
{ x: 40, y: 19 },
{ x: 50, y: 22 },
{ x: 60, y: 14 },
{ x: 70, y: 25 },
{ x: 80, y: 18 },
{ x: 90, y: 20 }
]
},
{
showInLegend: true,
type: "stackedColumn",
dataPoints: [
{ x: 10, y: 31 },
{ x: 20, y: 35 },
{ x: 30, y: 30 },
{ x: 40, y: 35 },
{ x: 50, y: 35 },
{ x: 60, y: 38 },
{ x: 70, y: 38 },
{ x: 80, y: 34 },
{ x: 90, y: 44 }
]
},
{
showInLegend: true,
type: "stackedColumn",
dataPoints: [
{ x: 10, y: 25 },
{ x: 20, y: 30 },
{ x: 30, y: 20 },
{ x: 40, y: 45 },
{ x: 50, y: 30 },
{ x: 60, y: 10 },
{ x: 70, y: 15 },
{ x: 80, y: 18 },
{ x: 90, y: 20 }
]
}]
});
chart.render();
addIndexLabels(chart);
function addIndexLabels(chart){
var lastVisibleDsIndex;
var i = chart.data.length - 1;
while(i >= 0) {
if(chart.data[i].visible){
lastVisibleDsIndex = i;
break;
}
else{
i--;
}
}
if(lastVisibleDsIndex < chart.data.length){
for(var j = 0; j < chart.data.length; j++)
chart.options.data[j].indexLabel = "";
chart.options.data[lastVisibleDsIndex].indexLabel = "#total";
chart.options.data[lastVisibleDsIndex].indexLabelPlacement = "outside";
chart.render();
}
}