Question

I am using jqplot to generate several line plots, and would like to add the highlight feature to it. In detail, once your mouse is over this line, it will highlight itself (change color). I have see this feature in bar plot (example). Is there a way to introduce this to line plot?

Here is the demo of my code.

Answer 1

This feature, at least to my knowledge, is not provided out of the box by the jqPlot. For this reason the ‘easiest’ is to add it yourself. I did something of this sort a while back. My approach was to use the jqplotMouseMove event and add the appropriate functionality there.

The idea of my approach is simple:

1. Get the distance of the mouse point from a line segment.
2. Then if it is smaller than the line’s width – you found your line.
3. Draw the line in different colour on the highlighter’s canvas (.jqplot-highlight-canvas), thus creating the highlight effect – for this canvas we need the highlighter plugin.

The working sample of the aforementioned idea is here.

PS: Thanks to Jonas Raoni Soares Silva, for the point to line distance function which saved lots of my time, and works great.