hover at a distance is interfering with zoom by dragging point instead of zooming

[keithmdragon]

example: http://jsfiddle.net/kdragon/gstaL9gu/1/

move the mouse around, so that a point is selected or highlighted, but the mouse is not very close to that point. if u try to click + drag, it will move the point vs zooming

it seems to have something to do with adding the line chart series

[pawelfus]

That is correct - line series approximates position and searches for the closest point. For scatter type, you need to hover directly marker to highlight it. In other words, use scatter series with lineWidth: 1, see: http://jsfiddle.net/gstaL9gu/2/

[keithmdragon]

thanks!!!

btw, is there a good source for learning about stuff like this, besides time and studying the code?

[pawelfus]

You can always ask the question on our forum or stackoverflow - you will get help for sure! For small core differences, I am not sure if there will be any better solution then diving into the source code (like imitating line series with scatter one) :)

Of course, lineWidth is documented in the scatter type API.

[onkelandy]

@pawelfus I've run into the same problem using a graph with spline interpolation. So the scatter approach doesn't work anymore if the points should be connected with splines instead of direct lines.

On such a graph it is not possible to click close to a line as the next/previous point automatically gets selected. Is there any chance to implement a "threshold/falloff" feature for that issue?

Attached you see the issue. The crosshair on the left indicates the cursor position - far, far away from the graph point on the right that still gets activated.

Thanks for your answer!

[pawelfus]

Hi @onkelandy

Could you create a demo? I will take a look if we can workaround the issue. Thanks!

[onkelandy]

It's a rough demo, not complete. Let's just assume that a click creates a new point that is also connected via spline. http://jsfiddle.net/onkelandy/wsfrh1ky/4/

Problem is now, if you wanted to set a point at x=6.5 and y=2.5 there is no way to do that because a point will always be selected. Though it is pretty far away... Hope it's understandable ;)

It would be very nice to have an option to define a certain distance from points where it doesn't get highlighted (and selected) anymore. So eg. between x=5.5 and 6.5 it should be possible to even click on the line directly to create a new point.

[pawelfus]

Thanks! I think it will be easier to use scatter - it won't work as you need (kind of snap/distance option), but it won't block you from clicking on a line: http://jsfiddle.net/BlackLabel/wsfrh1ky/15/

Snippet:

Highcharts.seriesTypes.scatter.prototype.getPointSpline = Highcharts.seriesTypes.spline.prototype.getPointSpline;

[onkelandy]

Thanks alot, @pawelfus
I guess that's good enough for now, cool!