line chart with ChartJS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>
<canvas id="myChart"></canvas>

JavaScript

var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
  draw: function() {
    originalLineDraw.apply(this, arguments);

    var chart = this.chart;
    var ctx = chart.chart.ctx;

    var xaxis = chart.scales['x-axis-0'];
    var yaxis = chart.scales['y-axis-0'];

    var limits = new Array();

    var max = new Array();
    max["value"] = chart.config.data.max;
    max["label"] = "Max.";
    max["color"] = "#085B8C";
    limits.push(max);

    var min = new Array();
    min["value"] = chart.config.data.min;
    min["label"] = "Min.";
    min["color"] = "#085B8C";
    limits.push(min);

    var avg = new Array();
    avg["value"] = chart.config.data.avg;
    avg["label"] = "Avg.";
    avg["color"] = "#8DC3E3";
    limits.push(avg);


    for (var i = 0; i < limits.length; i++) {

      //Refactor the value
      limits[i].value = yaxis.getPixelForValue(limits[i].value, undefined);
      ctx.fillStyle = 'black';
      ctx.fillText(limits[i].label, 35, limits[i].value - 5);

      ctx.save();
      ctx.beginPath();
      ctx.moveTo(xaxis.left, limits[i].value);
      ctx.strokeStyle = limits[i].color;
      ctx.lineTo(xaxis.right, limits[i].value);
      ctx.stroke();
      ctx.restore();
    }
  }
});

var config = {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First dataset",
      data: [65, 0, 80, 81, 56, 85, 40],
      fill: false,
      borderColor: "#3C8DBC",
    }],
    max: 85,
    min: 1,
    avg: 60,
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);