Draw horizontal lines in Chart.js 2.0

Question

Can you help me how to extend Chart.js v2.0. I need to draw some horizontal lines in the charts, something similar to: http://jsfiddle.net/vsh6tcfd/3/

var originalLineDraw = Chart.controllers.bar.prototype.draw;

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

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

    var index = chart.config.data.lineAtIndex;
    if (index) {
      var xaxis = chart.scales['x-axis-0'];
      var yaxis = chart.scales['y-axis-0'];

      ctx.save();
      ctx.beginPath();
      ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.left);
      ctx.strokeStyle = '#ff0000';
      ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.right);
      ctx.stroke();
      ctx.restore();
    }
  }
});

var config = {
    type: type,
    data:  jQuery.extend(true, {}, data),
    options: this.chartdata.options,
    lineAtIndex: 2
};

new Chart(ctx, config);  

Ethbin

In the fiddle provided, you actually do draw horizontal lines, don`t you? What exactly do you want to change? – Melissamelisse

The provided fiddle used Chart.js v1 but i am using v2. That code is not working on v2. – Ethbin

Sorry, did not notice that... – Melissamelisse

Answer 1

Options

With chart.js you have 2 options.

1. You could create a mix chart types (Example Here). This would allow you to add a line charts to create your lines.
2. You could create a plugin (See Example Below).

Option 2 would be the one I recommend as it allows you to have more control over the appearance of the lines.

The Fix

demo of the plugin

Chart.js now supports plugins. This allows you to add any features you want to your charts!

To create a plugin you will need to run code after an event has occurred and modify the chart/canvas as needed. The following code should give you a good starting point:

var horizonalLinePlugin = {
  afterDraw: function(chartInstance) {
    var yValue;
    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;
    }
  }
};
Chart.pluginService.register(horizonalLinePlugin);

Routinize

If you remove the ctx.font = "20px Georgia"; it looks like chart.js will use the same font and font size as the chart. I think that looks better overall and would recommend removing it. – Routinize

Thanks for the code! Works a treat after adding var yValue; in ECMA6 ;-) Had me flustered for a while with a yValue is undefined error in the console. – Autacoid

Good catch @StanSmulders. I updated my answer with the correction. – Routinize

You might want to consider changing your code to ctx.moveTo(chartInstance.chartArea.left, yValue); and ctx.lineTo(chartInstance.chartArea.right, yValue); which will draw the line on the graph only and not the entire canvas. – Mauritius

Is it possible to draw a dash line? – Belayneh

Yes. Use ctx.setLineDash([3, 5]);/*dashes are 3px and spaces are 5px*/. Demo use. Change added on line 33 – Routinize