Test Vertical Line

by Alex Raymond

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

JavaScript

function newDate(days) {
  return moment().add(days, 'd');
}

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

var config = {
  type: 'line',
  data: {
    labels: [newDate(1), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6), newDate(7), newDate(8), newDate(9), newDate(10), newDate(11), newDate(12)],
    datasets: [{
      label: "My First dataset",
      backgroundColor: "rgba(255, 99, 132, 0.8)",
      borderColor: "rgba(255, 99, 132, 0.8)",
      borderCapStyle: 'butt',
      data: [65, 0, 80, null, 81, 56, 85, 40],
      fill: false
    },
    {
      label: "My Second dataset",
      backgroundColor: "rgba(75,192,192,0.8)",
      borderColor: "rgba(75,192,192,0.8)",
      borderCapStyle: 'butt',
      data: [45, 5, 70, null, 91, 36, 125, 30],
      fill: false
    },
    
    ],
    lineAtIndex: newDate(2),
  },
      options: {
        title: {
                  display: true,
                  text: 'Self-Injurious vs Aggressive Behavior'
        },
        scales: {
          xAxes: [{
            type: 'time',
            time: {
              displayFormats: {
                'millisecond': 'MMM DD',
                'second': 'MMM DD',
                'minute': 'MMM DD',
                'hour': 'MMM DD',
                'day': 'MMM DD',
                'week': 'MMM DD',
                'month': 'MMM DD',
               ...