Chart.js: [QUESTION] Draw Line on Point Hover for ChartJS v.2

[sabelofficial]

So I'm trying to achieve the outcome of this JSFiddle (https://jsfiddle.net/haq5k2mw/) using ChartJS v.2. What I've achieved so far is that I was able to draw a vertical line when hovers on a POINT. What I want is that it draws a vertical line when the mover hovers over a gridline. Here's my code:

 Chart.plugins.register ( {
      afterDatasetsDraw: function(chart) {
        chart_type = chart.config.type;
        if (chart.tooltip._active && chart.tooltip._active.length && chart_type === 'line') {
             var activePoint = chart.tooltip._active[0],
             ctx = chart.chart.ctx,
             x_axis = chart.scales['x-axis-0'],
            y_axis = chart.scales['y-axis-0'],
            x = activePoint.tooltipPosition().x,
            topY = y_axis.top,
            bottomY = y_axis.bottom;


       // draw line
       ctx.save();
       ctx.beginPath();
       ctx.moveTo(x, topY+7);
       ctx.lineTo(x, bottomY+1);
       ctx.setLineDash([2,3]);
       ctx.lineWidth = 1;
       ctx.strokeStyle = '#ff7e01';
       ctx.stroke();
       ctx.restore();
     }
  }
});

[sabelofficial]

Closing this question. Found the answer here: https://github.com/chartjs/Chart.js/issues/2299

[philippegabert]

Hi,

good to hear to that solved your issue. Would you mind adding your code here? That would be awesome.

Thanks

[paulocoghi]

I'm also interested in knowing your code!

[sabelofficial]

just simply set the tooltip mode in your configuration to label or x-axis :)

config = {
  tooltips: {
    mode: 'label'  // or 'x-axis'
  }
}

[greysaga]

Thanks for the code, Sabeljimenez. How to implement this into react? I mean for the hover show line in xAxis part. Thanks in advance.

[gj1118]

@greysaga were you able to implement it in React ? Please confirm

Thanks

[greysaga]

No I couldn't.

On Sun, Feb 17, 2019 at 5:46 PM Gagan Janjua [e-mail]
wrote:

@greysaga https://github.com/greysaga were you able to implement it in
React ? Please confirm

Thanks

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/chartjs/Chart.js/issues/4945#issuecomment-464435077,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFdu_HGzxMPvubb-4yCCvhzTH9tBgVa6ks5vOSTfgaJpZM4Qcw3X
.

--
Grey Ooi
http://www.greysaga.com | 0163722125

[gj1118]

@greysaga I found out there is now a react-chart-js plugin which does that. Here it is https://github.com/spkellydev/chartjs-plugin-lineheight-annotation ..

thanks

[greysaga]

Thanks gj1118!

[jimmy18dev]

Thanks!!! @sabeljimenez