Position Text inbetween Stacked Columns by adding Scatter Series - CanvasJS JavaScript Charts

Position Text inbetween Stacked Columns by adding Scatter Series - 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", {
  title:{
    text: "Evening Sales in a Restaurant"
  },
  animationEnabled: true,
  axisX: {
    valueFormatString: "MMM",     
    interval: 1,
    intervalType: "month"
  },
  data: [
    {        
      type: "stackedColumn",
      legendText: "meals",
      showInLegend: "true",
      dataPoints: [
        { x: new Date(2012, 01, 1), y: 71 },
        { x: new Date(2012, 02, 1), y: 55 },
        { x: new Date(2012, 03, 1), y: 50 }

      ]
    },
    {        
      type: "stackedColumn",
      name: "snacks",
      showInLegend: "true",
      dataPoints: [
        { x: new Date(2012, 01, 1), y: 71 },
        { x: new Date(2012, 02, 1), y: 55 },
        { x: new Date(2012, 03, 1), y: 50 }

      ]
    },
    {        
      type: "stackedColumn",
      name: "drinks",
      showInLegend: "true",
      dataPoints: [
        { x: new Date(2012, 01, 1), y: 71 },
        { x: new Date(2012, 02, 1), y: 55 },
        { x: new Date(2012, 03, 1), y: 50 }

      ]
    },

    {        
      type: "stackedColumn",
      name: "dessert",
      showInLegend: "true",
      dataPoints: [
        { x: new Date(2012, 01, 1), y: 61 },
        { x: new Date(2012, 02, 1), y: 75 },
        { x: new Date(2012, 03, 1), y: 80 }        
      ]
    },
    {        
      type: "stackedColumn",
      name: "takeaway",
      showInLegend: "true",
      dataPoints: [
        { x: new Date(2012, 01, 1), y: 20 },
        { x: new Date(2012, 02, 1), y: 35},
        { x: new Date(2012, 03, 1), y: 30 } 
      ]
    }
  ]
});

chart.render();

chart.addTo("data", {
										type: "scatter",
                    markerSize: 0,
                    highlightEnabled:false, 
										dataPoints: [
                    	{ x: new Date(2012, 01, 15), y: 40, indexLabel: "▲ - 16" },
                      { x: new Date(2012, 02, 15), y: 40, indexLabel: "▲ - 14" }
                    ]
						});