Tutorial on Creating Stacked Charts - 2 | JSFiddle Sample Code

Tutorial on Creating Stacked Charts - 2 | JSFiddle Sample Code

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/stacked-charts/" target="_blank" title="Tutorial on Creating Stacked Charts ">https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/stacked-charts/</a></div>

JavaScript

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
      text: "Evening Sales"
      },
      axisX: {
        valueFormatString: "MMMM",
        interval: 1,
        intervalType: "month"
      
      },
      data: [
      {        
        type: "stackedColumn",
        legendText: "meals",
        showInLegend: "true",
        indexLabelPlacement: "inside",
        axisYType: "first",
        dataPoints: [
        { x: new Date(2012, 01, 1), y: 71 ,indexLabel: "1"},
        { x: new Date(2012, 02, 1), y: 55,indexLabel: "2"},
        { x: new Date(2012, 03, 1), y: 50 ,indexLabel: "3"},
        { x: new Date(2012, 04, 1), y: 65,indexLabel: "4" }
        
        ]
      },
        {        
        type: "stackedColumn",
        legendText: "snacks",
        showInLegend: "true",
          axisYType: "first",
        dataPoints: [
        { x: new Date(2012, 01, 1), y: 71 ,indexLabel: "5"},
        { x: new Date(2012, 02, 1), y: 55,indexLabel: "6"},
        { x: new Date(2012, 03, 1), y: 50 ,indexLabel: "7"},
        { x: new Date(2012, 04, 1), y: 65 ,indexLabel: "8"}
        
        ]
      },
        {        
        type: "stackedColumn",
        legendText: "Drinks",
        showInLegend: "true",
          axisYType: "secondary",
        dataPoints: [
        { x: new Date(2012, 01, 1), y: 71 ,indexLabel: "9"},
        { x: new Date(2012, 02, 1), y: 55,indexLabel: "10"},
        { x: new Date(2012, 03, 1), y: 50 ,indexLabel: "11"},
        { x: new Date(2012, 04, 1), y: 65 ,indexLabel: "12"}
        
        ]
      },
        
        {        
        type: "stackedColumn",
        legendText: "dessert",
        showInLegend: "true",
          axisYType: "secondary",
        dataPoints: [
        { x: new Date(2012, 01, 1), y: 61 ,indexLabel: "13"},
        { x: new Date(2012, 02, 1), y: 75,indexLabel: "14"},
        { x: new Date(2012, 03, 1), y: 80 ,indexLabel: "15"},
        { x: new Date(2012, 04,...