Chart.js 2.0 - vertical lines

Question

Can anyone tell me how to extend Chart.js v2.0. I need vertical lines in a line chart and I want to implement something similar to http://jsfiddle.net/dbyze2ga/.

Chart.types.Line.extend({
name: "LineWithLine",
draw: function () {
    Chart.types.Line.prototype.draw.apply(this, arguments);

    var point = this.datasets[0].points[this.options.lineAtIndex]
    var scale = this.scale

    // draw line
    this.chart.ctx.beginPath();
    this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
    this.chart.ctx.strokeStyle = '#ff0000';
    this.chart.ctx.lineTo(point.x, scale.endPoint);
    this.chart.ctx.stroke();

    // write TODAY
    this.chart.ctx.textAlign = 'center';
    this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
}
});

new Chart(ctx).LineWithLine(data, {
                            datasetFill : false,
                            lineAtIndex: 2
 });

The problem is that with Chart.js 2.0 theclass hierarchy has changed and they use now controllers for each dataset. You can find the new documentation at [link](http://nnnick.github.io/Chart.js/docs-v2/#advanced-usage-extending-existing-chart-types). I also create a new fiddle with the 2.0 library [link](http://jsfiddle.net/1v6pjy3u/1/). — wannensn, Apr 01 '16 at 14:27

potatopeelings · Accepted Answer · 2017-07-14T00:45:38.853

35

UPDATE: See https://stackoverflow.com/a/45092928/360067 for a simpler and more robust solution using the Chart Annotations plugin.

You can extend the line type to add support for drawing a line

Preview

Script

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 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.top);
      ctx.strokeStyle = '#ff0000';
      ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
      ctx.stroke();
      ctx.restore();
    }
  }
});

and then

var config = {
  type: 'line',
  data: {
    labels: ...
    datasets: [
        ...
    ],
    lineAtIndex: 2
  }
};

Fiddle - http://jsfiddle.net/mn8x6fso/

edited Jul 14 '17 at 00:45

answered Apr 05 '16 at 15:40

potatopeelings

40,709
7
95
119

For me this does nothing at all. – Jemar Jones May 03 '17 at 20:54
1

@JemarJones - the library is currently at v2.5. This answer (written for v2.0) may not work. Checkout the annotations plugin and if that isn't suitable you might want to ask a new question. Cheers! – potatopeelings May 04 '17 at 02:42
@potatopeelings I want to using this option in " time" type in x-axis.I am using the same configuration change as you mansion above. But line not display. And x-axis type change into line its wrok but my x-axis wrong scale . Can you help me to do it? – Dushyantha May 04 '17 at 08:52
@potatopeelings i want to pass comma separated multiple indexes (ex: 8,20,26) to draw red line the same you did for index 2, please help me. – Sha Jul 06 '20 at 12:54

score 18 · Answer 2 · answered Jul 14 '17 at 00:44

For v2.0, the best way is to use the Chart Annotations plugin (https://github.com/chartjs/chartjs-plugin-annotation)

Fiddle - https://codepen.io/anon/pen/ZywgKr

Script

var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, {
    type: "line",
    data: {
      labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
      datasets: [
        {
          data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
        }
      ]
    },
    options: {
      annotation: {
        annotations: [
          {
            type: "line",
            mode: "vertical",
            scaleID: "x-axis-0",
            value: "MAR",
            borderColor: "red",
            label: {
              content: "TODAY",
              enabled: true,
              position: "top"
            }
          }
        ]
      }
    }
  }
);

Cross posted from https://github.com/chartjs/Chart.js/issues/4495#issuecomment-315238365

It does not show anything. – Nijat Mursali Nov 23 '22 at 12:37 — Nijat Mursali, Nov 23 '22 at 12:37

score 1 · Answer 3 · answered Aug 29 '16 at 12:53

For the ones looking for horizontal lines, here is what i got so far:

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

jsFiddle

Chart.js 2.0 - vertical lines

3 Answers3

Linked