How can you combine multiple graphs and control with one range selector with Highcharts?-CodePudding

I have multiple graphs one on page. The goal with these charts is to sync the charts up to one range selector (preferably a custom one which allow for predefined time selections ~1day, ~7days, ~30days etc). Something which is similar to that of Grafana and it's layout.

Imagine the following layout

---- Range Selector ----
||||||||||||||||||||||||
------- Graph 1 --------
||||||||||||||||||||||||
------- Graph 2 --------

I have scoured Highcharts forums for an answer and within the documentation and have not found anything other than to make use of master-detail API Reference

If anyone has attempted anything similar, or seen another framework which could better help in the direction I wish to take, it would be appreciated for any input.

CodePudding user response：

All you need to do is to connect the navigator range with x-axes extremes by using setExtremes method. The below example is using a navigator from Highstock.

    xAxis: {
        ...,
        events: {
            afterSetExtremes: function(e) {
                chart1.xAxis[0].setExtremes(e.min, e.max, true, false);
                chart2.xAxis[0].setExtremes(e.min, e.max, true, false);
            }
        }
    }

Live demo: http://jsfiddle.net/BlackLabel/4Lfegyqa/

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