Highcharts - use navigator as a seperate time selector

Question

I have more than one chart in one page, all of them uses same data but in different chart types.

I would like to change all of their time with only one navigator on the top. like using it as a datepicker input, how can i achieve that?

Answer 1

Use afterSetExtremes event callback function and apply the same extremes on the rest charts:

    xAxis: {
        events: {
            afterSetExtremes: function(e) {
                var min = e.userMin,
                    max = e.userMax;

                chart1.xAxis[0].setExtremes(min, max, true, false);
                chart2.xAxis[0].setExtremes(min, max, true, false);
            }
        }
    }

Live demo: http://jsfiddle.net/BlackLabel/8gc9qwsp/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

https://api.highcharts.com/highstock/xAxis.events.afterSetExtremes