Stacked Column chart showing the total value of individual column in index Labels - CanvasJS JavaScript Charts

Stacked Column chart showing the total value of individual column in index Labels - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://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

var chart = new CanvasJS.Chart("chartContainer",{
  data: [
    {
      type: "stackedColumn",
      indexLabel: "{y}",
      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",
      indexLabel: "{y}",
      dataPoints: [
        {  y: 135305 , label: "USA"},
        {  y: 107922, label: "Russia" },
        {  y: 52300, label: "China" },
        {  y: 33600, label: "India" },
        {  y: 39900, label: "Australia"},
        {  y: 50066, label: "SA"}
      ]
    }, 
    {
      type: "line",                 //Adding a hidden series to display the total
      color: "transparent",
      indexLabel: "Total: {y}",
      toolTipContent: null,
      dataPoints: []
    }
  ]
});

for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
  chart.options.data[2].dataPoints.push({
    label: chart.options.data[0].dataPoints[i].label, 
    y: chart.options.data[0].dataPoints[i].y + chart.options.data[1].dataPoints[i].y
  });
}

chart.render();