Chartjs-Vertical line at the end of a dataset

by

0👍

✅

Try this

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), 200);
      ctx.strokeStyle = '#ff0000';
      ctx.lineTo(xaxis.getPixelForValue(undefined, index), 20);
      ctx.stroke();
      ctx.restore();
      ctx.textAlign = 'center';
      ctx.fillText("AVERAGE", xaxis.getPixelForValue(undefined, index), 40);
    }
  }
});
var config = {
  type: 'line',
  data: {

    labels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    lineAtIndex: 5,
    datasets: [{
        label: "My First dataset",
        data: [0, 20, 30, 40, 40, 40, null, null, null, null, null],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
        ]
      },
      {
        label: "My Second dataset",
        data: [null, null, null, null, null, 40, 40, 40, 40, 50, 60],
        backgroundColor: [
          "rgba(151,187,205,0.2)"
        ],
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
      }
    ]
  },
  title: {
    display: true,
    text: 'd',

  },


};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>

<canvas id="myChart" width="400" height="250"></canvas>

Leave a comment