About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

How do I add crosshairs to a Line chart?


Posted by Lorri at 18:24 on Thursday 31st December 2020 [link]
I have a Line chart that I'd like to add crosshairs when the user clicks or hovers over a point.

Thanks.

Posted by Richard at 18:37 on Thursday 31st December 2020 [link]
The easiest way is to just use the crosshairs* properties. With the Line chart it only works with the mousemove event.

I've made you an example and it's here:

https://codepen.io/rgraph/pen/LYRdbwJ

NOTE:

Initially I said that you had to use the Scatter chart for this - but that is only if you wish to get an X/Y coordinate pair (since the Scatter chart has an X axis scale). This example shows a Line chart with crosshairs.

[Replies are now closed]