Position Text inbetween Stacked Columns using Stripline - CanvasJS JavaScript Charts

Position Text inbetween Stacked Columns using Stripline - 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.axisX[0].addTo("stripLines", {value: new Date(2012, 01, 16), label: "▲ - 16", color: "transparent", labelFontColor: "black", labelAlign: "near", labelFontSize: 16} );

chart.axisX[0].addTo("stripLines", {value: new Date(2012, 02, 18), label: "▲ - 14", color: "transparent", labelFontColor: "black", labelAlign: "near", labelFontSize: 16} );