Chart with horizontal lines

Cannot get working horizontal lines when using chart.js 3.x ...

by mr_rulez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.6/chart.js"></script>
<canvas id="myChart" class="container"></canvas>

CSS

.container{
  position: relative;
  width: 50vw;
}

JavaScript

var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");

var horizonalLinePlugin = {
  id: 'horizontalLine',
  afterDraw: function(chartInstance) {
    var yScale = chartInstance.scales["y-axis-0"];
    var canvas = chartInstance.chart;
    var ctx = canvas.ctx;
    var index;
    var line;
    var style;

    if (chartInstance.options.horizontalLine) {
      for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
        line = chartInstance.options.horizontalLine[index];

        if (!line.style) {
          style = "rgba(169,169,169, .6)";
        } else {
          style = line.style;
        }

        if (line.y) {
          yValue = yScale.getPixelForValue(line.y);
        } else {
          yValue = 0;
        }

        ctx.lineWidth = 3;

        if (yValue) {
          ctx.beginPath();
          ctx.moveTo(0, yValue);
          ctx.lineTo(canvas.width, yValue);
          ctx.strokeStyle = style;
          ctx.stroke();
        }

        if (line.text) {
          ctx.fillStyle = style;
          ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
        }
      }
      return;
    }
  }
};


var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "MyDataset01",
    fill: false,
    lineTension: 0.1,
    backgroundColor: "rgba(75,192,192,0.4)",
    borderColor: "rgba(75,192,192,1)",
    data: [65, 59, 80, 81, 56, 55, 40],
  }]
};

////When uncommenting below line, graph is created without horizontal lines
Chart.register(horizonalLinePlugin);
var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    "horizontalLine": [{
      "y": 75.8,
      "style": "#ff0000",
      "text": "upper-limit"
    }, {
      "y": 62.3,
      "style": "#00ff00",
      "text": "avg"
    }, {
      "y": 48.8,
      "style": "#0000ff",
      "text": "lower-limit"
    }]
  }
});