Stacked Bar chart with Stripline label placed outside - CanvasJS JavaScript Charts

Stacked Bar chart with Stripline label placed outside - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="http://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: 80px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{
  axisX:{
    interval: 0,
    gridThickness: 0,
    tickLength: 0,
    tickThickness: 0,
    lineThickness: 0,
    labelFontSize: 0,
  },
  axisY2:{        
    interval: 0,
    gridThickness: 0,
    tickLength: 0,
    tickThickness: 0,
    lineThickness: 0,
    labelFontSize: 0,
    stripLines: [
      {
        value: 75,
        thickness: 1,
        color: "black",
        showOnTop: true,
        label: "Plan 75%",
        labelPlacement: "outside",
        labelFontSize: 12,
        labelBackgroundColor: "transparent"
      }]
  },
  dataPointWidth: 16,
  dataPointMinWidth: 16,
  data: [
    {
      type: "stackedBar",
      axisYType: "secondary",
      indexLabelFontSize: 25,
      dataPoints: [
        { y: 75,  color: "#00a04a" },
      ]
    },
    {
      type: "stackedBar",
      axisYType: "secondary",
      dataPoints: [
        { y: 100, color: "#e6e6e6" },
      ]
    }
  ]
});

chart.render();