Search code examples
reactjshighchartsnavigatorreact-highcharts

Highstock Single Navigator for multiple Charts

Is there a known way of having a single Navigator that's able to control multiple Charts, given that they share the same time range?

Solution

  • Yes, you need to only connect setting extremes process in charts, for example:

    const chart1 = Highcharts.stockChart('container', {
    ...
});

Highcharts.stockChart('container2', {
    ...,
    xAxis: {
        ...,
        events: {
            setExtremes: function(e) {
                chart1.xAxis[0].setExtremes(e.min, e.max, true, false);
            }
        }
    }
});

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

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