highchart/highstock tooltip does not adjust after zoom

Question

I'm using highstocks to plot a serie. When using tooltip pointformat showing point.y the tooltip doesn`t readjust when zooming, so if you zoom in the middle of the graph the graph should always start at 0, but the tooltip is showing yaxis value from when the graph wasn´t zoomed.

If I choose to show point.change it will readjust when zoom, but the total shows wrong. For example should the last point (2017-12-28) show 320.59%, and when using point.change its showing 318.78% (which is wrong).

How can I fix so the tooltip pointformat readjusts when zooming? I'm using compare: 'value' in plotOptions {} so the graph starts at 0 when zooming.

Please see fiddle: http://jsfiddle.net/cabvvpze/2/

point.change seems to have the incorrect value because the compare function does not like the first value 0. This shifts all values by the difference of the first and second point, i.e. 1.8. I tried setting the first point to 0.00001 and that does seem to give point.change the correct value. Not posting this as an answer since it not really a solution. See jsfiddle.net/ewolden/cabvvpze/3 for my example. — ewolden
Well it might be an work around worth trying, and then keep looking for a better solution. Thanks! — MrProgram

Kamil Kulig Kamil Kulig · Accepted Answer · 2018-01-18T11:50:35

The point.change is calculated using the first non-null and non-zero value (https://api.highcharts.com/highstock/series.line.compare). When the chart is not zoomed the first value that satisfies this condition is ~1.81 (second point) - everything is done using this value as baseline.

Series hold the information about this specific value in compareValue property - it can be used in tooltip.pointFormatter to achieve the desired result.

If the chart is not zoomed (it can be determined by checking whether chart.resetZoomButton is initialized or not) print series.compareValue + point.change in the tooltip. Otherwise use point.change.

  pointFormatter: function() {
    var series = this.series,
      chart = series.chart;

    return '<span style="color:{' + series.color + '}"></span>' + ((!chart.resetZoomButton ? series.compareValue : 0) + this.change) + '%<br/>';

  }

Live demo: http://jsfiddle.net/kkulig/32kuokhb/

API reference: https://api.highcharts.com/highstock/tooltip.pointFormatter

highchart/highstock tooltip does not adjust after zoom

1 Answers