I have a Dygraph scatter chart of our data where I have instances of tightly grouped date-time stamps being graphed. The further away the mouse pointer is from the X axis the more difficult it seems to highlight those points. It's possible to highlight them, but it's very twitchy until zoomed in very tightly.
For example, in order to view the point data associated with the points along the 4 or 6 or 8 RPM lines, you have to zoom in very-very tightly in both the X & Y axes. I want my users to be able to just point at a given point to get the associated data, without having to zoom in each time. Is there some way to reduce the proximity necessary, or precision of pointing to get the point-data from a given point?
Working Example:
Using the fiddle listed above, when zoomed all the way out, attempt to hover at the point that appears to be at: X: Aug 12, Y: 6 (it's actual data is: [new Date("2012/08/02 09:49:15"), 6.000000, 44190],. Notice that it's almost impossible to highlight that point as the points in close temporal proximity with lesser Y values are far more likely to be highlighted, even if you've got the cursor directly over the point.
It looked like .findClosestPoint might be what I was looking for. But reading the comments in the latest build for it I'm no longer so sure:
/**
* Given canvas X,Y coordinates, find the closest point.
*
* This finds the individual data point across all visible series
* that's closest to the supplied DOM coordinates using the standard
* Euclidean X,Y distance.
*
* @param {number} domX graph-relative DOM X coordinate
* @param {number} domY graph-relative DOM Y coordinate
* Returns: {row, seriesName, point}
*
@private
*/
This seems to imply that the Canvas coordinates are supplied programmatically, not via mouse pointer, but that's just a guess. Also, I haven't found any examples with it's use. Is there some way to make choosing a point less twitchy?
By default, dygraphs highlights corresponding points for every series (i.e. points which appear in the same row of the input data). This is typically what you want for time series plots, but as you've noted, for scatter plots where there may be multiple points in the same series with the same x-value, it breaks down.
The highlightSeriesOpts option, which is typically used to style the currently-highlighted series, has the side effect of changing the selection logic to be "closest by euclidean distance", rather than "closest by x-value". So you can achieve the effect you want by setting this option to an empty object:
new Dygraph(data, div {
highlightSeriesOpts: {}
})
Here's an updated version of your demo with the fix: JSFiddle