Search code examples
javascripthighchartszooming

Is it possible to get a statechange of the zoom or other zoom-related parameters in order to dynamically set tickInterval in Highcharts?

edit: fiddle here: https://jsfiddle.net/o9sjyxqf/ .

As I have continued working on a Highcharts project, this question arose.

It is about the tick marks on the xAxis.

I have a Highchart that has daily data points for a certain timeframe (e.g. 6 months). So when the chart displays 6 months, I have roughly 6x30 data points. When zooming in, there will be less, e.g. 3 weeks (3x21 data points).

When viewing without zoom, there is too many data points and the tick marks on the xAxis are cluttered. Reducing the tickInterval unclutters this. But then there isn't enough tick marks on the xAxis when zooming in.

I would like to register programmatically (an event?) when the zoom is being used, ideally also what exactly is being zoomed to, so that the tickInterval can be set accordingly (dynamically, higher value tickInterval for zoomed out, lower value tickInterval for zoomed in).

Is this possible? Is there an event or something similar that registers use of the zoom? What other suggestions do you have to keep the xAxis marks nice and tidy for both zoom in and zoom out, if tickInterval cannot be changed dynamically in dependancy from the zoom?

To demonstrate: When loading the chart (start and end points are set / zoomed in): zoomed in 2

When zooming out:

Zoomed out

Thanks for your help and support!

Solution

  • You can use setExtremes event callback function and update tick interval based on min and max values.

        xAxis: {
        type: 'datetime',
        events: {
            setExtremes: function(e) {
                const interval = (e.max - e.min) / 6;

                this.update({
                    tickInterval: interval
                }, false);
            }
        }
    }

    You can also consider using minTickInterval or tickPixelInterval.

    Live demo: http://jsfiddle.net/BlackLabel/d1Lbj9xh/

    API Reference:

    https://api.highcharts.com/highcharts/xAxis.events.setExtremes

    https://api.highcharts.com/highcharts/xAxis.minTickInterval

    https://api.highcharts.com/highcharts/xAxis.tickPixelInterval