Chart.js vertical line in chart

[.spider.]

I want to draw a vertical line in my chart.js chart.

The vertical line should correspond to the most recent data point.

 

I already found an example at Stackoverflow but I have no idea how to integrate that into my code. "lineAtIndex: 2" is no problem I could get the index easily. 

The problem is that I do not know how the integrate the line in general. Could someone point me into the right direction? 

<canvas id="presChart" width="626" height="313" style="width: 626px; height: 313px;"></canvas>

var ctx = document.getElementById('presChart').getContext('2d');
var presChart = new Chart(ctx, {type: 'line',
data:{labels: ['15:37','15:42','15:47'],
datasets: [{fill: false, label: 'Pressure',data: [1003.11,1003.04,1003.02],
yAxisID: "L", backgroundColor: "rgba(255,88,0,0.5)",borderColor: "rgba(255,88,0,0.5)"}]},
options: {responsive: true, title:{display:true, text:'Measurements'},
elements: {point:{pointStyle:'crossRot'}},
scales: {xAxes:[{display:true, scaleLabel:{display:true, labelString:'Time'}}],
yAxes: [{id: 'L', type: 'linear', position: 'left',scaleLabel:{display:true, labelString:'hpa'}}]}}});

 

 

 

[Mr_KoKa]

Can you post your current minimal code that will contain some of data to fiddle with? Like canvas with chart code.

 

Edit: nvm I thought the code you posted is from stack.

 

Ok, @.spider.. I fiddled with it and came up with this:

 

var horizonalLinePlugin = {
  afterDraw: function(chartInstance) {
    var data = chartInstance.data.datasets[0].data;
    if(data.length > 0){
      var yScale = chartInstance.scales['L'];
      var ctx = chartInstance.chart.ctx;
      var height = yScale.getPixelForValue(data[data.length - 1]);
      
      ctx.lineWidth = 1;

      ctx.beginPath();
      ctx.moveTo(chartInstance.chartArea.left, height);
      ctx.lineTo(chartInstance.chartArea.right, height);
      ctx.strokeStyle = 'rgba(0, 0, 0, 0.75)';
      ctx.stroke();
    }
  }
};
Chart.pluginService.register(horizonalLinePlugin);

It worked for me to paste it after and before your code, but I think before is best. Here is example https://repl.it/Krig/2

You may want to add some value (label and data) so last value won't be on bottom of y axis.

[.spider.]

It looks like the code is drawing a horizontal line at the bottom of the chart. I was looking for a vertical line. 

I also do not understand where to enter the value for the line.

[Mr_KoKa]

Like vertical line over existing vertical line? The existing is x axis line with label "15:32"

Edit: @.spider. Take a look at this one: https://repl.it/Krig/3

[.spider.]

I still do not understand where to enter the value for the line.

[Mr_KoKa]

Line is drawn at most recent data point so you don't need to specify any values. It takes the last value from dataset.