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 origin         


        

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);