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.
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