17

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);
Munna Khan
  • 1,902
  • 1
  • 18
  • 24

1 Answers1

26

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);
Community
  • 1
  • 1
L Bahr
  • 2,723
  • 3
  • 22
  • 25
  • 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. – L Bahr Jul 13 '16 at 14:27
  • 1
    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. – Stan Smulders Nov 03 '16 at 09:17
  • 1
    Good catch @StanSmulders. I updated my answer with the correction. – L Bahr Nov 03 '16 at 14:31
  • 1
    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. – Levi Botelho Mar 01 '17 at 14:50
  • Is it possible to draw a dash line? – VAAA Jul 15 '17 at 04:47
  • 1
    Yes. Use ctx.setLineDash([3, 5]);/*dashes are 3px and spaces are 5px*/. [Demo use. Change added on line 33](http://jsfiddle.net/Lgtzcr7v/112/) – L Bahr Jul 15 '17 at 15:09