Highcharts get series data zoom indices

Question

When viewing a zoomed selection of a series line graph I can query how many points are in view chart.series[0].activePointCount (Doesn't appear to be in API docs?). The active points are not necessarily in the zoomed view, both left/right bounds may have a single point beyond them from the active count, and I've noticed points in between the view bounds can extend beyond the top/bottom bounds.

I've received a useful answer to my original question with the following jsFiddle you can use for reference. It's purpose is to assign high/low marker within the current view. However dataMax/dataMin is not always correct if the point is out of bounds.

I can correct the issue comparing the yExt.dataMax for example with yExt.max and using the latter if dataMax is greater, this will place the marker on the top edge of the graph. I could also prevent yAxis zoom/scaling, and just handle the logic for the xAxis.

The jsFiddle method however is iterating through the entire dataset of the series. Is there a way to get the index of the first activePoint in the zoomed graph? Without having to iterate the entire dataset with a conditional statement. Perhaps there is an internal or undocumented variable storing the index value I'm after? Alternatively instead of a start/end index, an extracted/isolated array set of the points within the zoomed view would also work.

Answer 1

chart.series[0].points turns out to be what I was after. With the jsFiddle example, it uses HighCharts where the points array will be identical to data. cropThreshold will crop the points array to those in the zoom/plot bounds when the total points of your series data exceeds the value of cropThreshold.cropThreshold defaults to 300, the example dataset is 262 points. Setting cropThreshold to 0 will ensure the points array will always be cropped.

HighStock with it's added dataGrouping feature is enabled and has a similar effect providing only the points of interest in the points array. If you need to disable the feature, you can use cropThreshold instead like with HighCharts.

It's also worth noting that the dataGrouping feature modifies the data array, data begins empty but seems to insert points into the data array relative to their index from the dataset when you zoom or pan(perhaps other actions). Due to this behaviour your data array can have points stored but not starting from an index of 0. The jsFiddle example iterates through data from 0 to length-1 with jQuery each(), which errors due to the initial index being greater than 0.

It would be better to iterate the points array instead, which would have an added performance benefit instead of iterating through the entire dataset. It's also possible to check if a point is within the bounds by comparing against the min/max values from the x/y axis getExtremes() object. Excluding the out of bound points would require ignoring the dataMin/dataMax properties and iterating through points array comparing/storing the highest/lowest y value.

If not excluding the out of bound points, I'm not sure how to proceed yet. The provided scatter method can have the y value set to the yAxis min/max and have mouse tracking disabled to prevent the tooltip as it's y value is no longer correct, alternatively I could use a flag instead of scatter and set it's title to the actual value.