Vertical Line Mousemove

Hi,

I’m using Chart.js v2 and I want to be able to have a vertical line when moving the mouse, which displays the current tooltip, when the point is hit. Have found many things on StackOverflow, but they were written for Chart.js v1 + not what I needed.

I know, an Image doesn’t help much, but anyway, here’s what it should look like (imagine moving the mouse):
image

Author: Fantashit

2 thoughts on “Vertical Line Mousemove

  1. I updated example from @etimberg to make it working for me:
    `var ctx = document.getElementById(‘chart’).getContext(‘2d’);
    new Chart(ctx, {
    type: ‘line’,
    data: {
    labels: [‘January’, ‘February’, ‘March’, ‘April’],
    datasets: [{
    data: [10, 0, 20, 30],
    label: ‘First dataset’
    }]
    },
    options: {
    customLine: {
    color: ‘black’
    },
    tooltips: {
    intersect: false
    }
    },
    plugins: [{
    beforeEvent: function(chart, e) {
    if ((e.type === ‘mousemove’)
    && (e.x >= e.chart.chartArea.left)
    && (e.x <= e.chart.chartArea.right)
    ) {
    chart.options.customLine.x = e.x;
    }
    },
    afterDraw: function(chart, easing) {
    var ctx = chart.chart.ctx;
    var chartArea = chart.chartArea;
    var x = chart.options.customLine.x;

      if (!isNaN(x)) {
        ctx.save();
        ctx.strokeStyle = chart.options.customLine.color;
        ctx.moveTo(chart.options.customLine.x, chartArea.bottom);
        ctx.lineTo(chart.options.customLine.x, chartArea.top);
        ctx.stroke();
        ctx.restore();
      }
     }
    

    }]
    })`

Comments are closed.