HighCharts dynamic high/low extreme markers

Question

I am wanting to display a marker on the highest and lowest point value in view along the y axis on a line series. I know how to add a marker manually but would like to add/remove them dynamically if a zoom/pan or anything else alters the visible high/low points is there a way to know this and the new high/low to add/remove the markers?

A previous SO question asked for similar advice with this mockup image: http://cl.ly/image/1f0m3l241e2S. The answer though is providing it with your data source, which wouldn't update via zoom/pan or streaming data.

I could potentially loop through the data source myself(2D Array), find the high/low and set them, doing the same on zoom/pan events if I can loop through only the zoomed section of the array. Though if I have dataGrouping set to true, the array of values I iterate over may not match up correctly?

Answer 1

You can do this by

1) using the getExtremes() method to get the high/low data points

2) using the afterSetExtremes() event to capture a zoom event and recalculate

A couple of potentially relevant posts:

• Highcharts - Diagonal line X/Y axis

• Highcharts moving average based on visible data only

You can set this up in a function, to loop through your data and look for a match to the high/low data points, and from them build a scatter series marking the high/low points on the chart.

An example that marks the points both on chart load and zoom:

• http://jsfiddle.net/jlbriggs/475ax4eL/

function sample, gets the relevant x value at which to place the marker matching the high/low data point:

$.each(chart.series[0].data, function(i,point) {
    if(point.y == maxData && point.x <= maxTime && point.x >= minTime) {
        xMax = point.x;
    }
    if(point.y == minData && point.x <= maxTime && point.x >= minTime) {
        console.log(point);

        xMin = point.x;
    }
});

{{UPDATE:

Important to note this issue:

• https://github.com/highslide-software/highcharts.com/issues/985

If you are going to use column or area series, you will need to get the min and max from the series object instead of the getExtremes() method, because the chart internally sets the dataMin to 0 for those series types.

Easy enough to adapt the function accordingly.

And on a similar note, if you are going to use a boxplot, columnrange, or other similar series without an explicit y value, you will have to update accordingly as well.

share|improve this answer

edited May 23 '17 at 12:08

Community♦

111 silver badge

answered Jan 28 '15 at 16:32

jlbriggsjlbriggs

15.7k44 gold badges2727 silver badges4848 bronze badges