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

Stacked Bar chart as loader with Stripline label placed outside - 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: 60px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{
        interactivityEnabled: false,
        animationEnabled: true,
        creditText: false,
        toolTip: {
            enabled: false
        },
        axisX: {
            interval: 0,
            gridThickness: 0,
            tickLength: 0,
            tickThickness: 0,
            lineThickness: 0,
            labelFontSize: 0,
            tickLength: 0,
            margin: -10
        },
        axisY2: {
            interval: 0,
            gridThickness: 0,
            tickLength: 0,
            tickThickness: 0,
            lineThickness: 0,
            labelFontSize: 0,
            tickLength: 0,
            margin: -1,
            stripLines: [
      {
          value: 50,
          thickness: 1,
          color: "red",
          showOnTop: true,
          label: "Data error",
          labelPlacement: "outside",
          labelFontSize: 12,
          labelBackgroundColor: "transparent",
          tickLength: 0
      }]
        },
        dataPointWidth: 16,
        dataPointMinWidth: 16,
        dataPointMaxWidth: 16,
        data: [
    {
        type: "stackedBar",
        axisYType: "secondary",
        indexLabelFontSize: 25,
        dataPoints: [
        { y: 50, color: "#e6e6e6" },
      ]
    },
    {
        type: "stackedBar",
        axisYType: "secondary",
        dataPoints: [
        { y: 50, color: "#e6e6e6" },
      ]
    }
  ]
    });

chart.render();