Highcharts synchronise range selector and navigator on 3 charts

Question

I'm looking to syncronise the navigator and the range selector on my 3 charts.

I currently have the navigator at the bottom of the last chart and the range selector at the top of the first chart. However these still only control their related chart and not syncronised with the others.

Please see my fiddle: http://jsfiddle.net/gdf0swa9/

var options = {
                                        "chart": {
                                            "type": "line",
                                            "polar": false,
                                            "zoomType": "x",
                                            "inverted": false
                                        },
                                        "rangeSelector": {
                                            "enabled": true
                                        },
                                        "navigator": {
                                            "enabled": false
                                        },
                                        "scrollbar": {
                                            "enabled": false
                                        },
                                        "title": {
                                            "text": "Peak",
                                            "align": "left",
                                            "floating": false
                                        },

                                        "subtitle": {
                                            "text": " "
                                        },

                                        "series": [{
                                            "name": "Peak",
                                            "turboThreshold": 0,
                                            "color": "#FF0000",
                                            "threshold": 14,
                                            "type": "line",
                                            "dashStyle": "Solid",
                                            "negativeColor": "#ffee58",
                                            "colorByPoint": false,
                                            "visible": true
                                        }, {
                                            "name": "Minimum",
                                            "type": "line",
                                            "color": "#f44336",
                                            "dashStyle": "ShortDash",
                                            "visible": false
                                        }, {
                                            "name": "Maximum",
                                            "dashStyle": "LongDash",
                                            "type": "line",
                                            "color": "#f44336",
                                            "visible": false
                                        }, {
                                            "name": "Threshold",
                                            "type": "line",
                                            "color": "#f50057",
                                            "visible": false
                                        }, {
                                            "name": "Location Temperature",
                                            "visible": false
                                        }],
                                        "data": {
                                            "csv": "\"Movement\";\"Peak\";\"Minimum\";\"Maximum\";\"Threshold\";\"Location Temperature\"\n1;12.87;12;15;14;20\n2;16;12;15;14;23\n3;12.92;12;15;14;22\n4;13.14;12;15;14;25\n5;12.88;12;15;14;24\n6;13.03;12;15;14;23\n7;12.76;12;15;14;20\n8;16;12;15;14;22\n9;12.72;12;15;14;20\n10;13.2;12;15;14;24",
                                            "googleSpreadsheetKey": false,
                                            "googleSpreadsheetWorksheet": false
                                        },

                                        "pane": {
                                            "background": []
                                        },
                                        "responsive": {
                                            "rules": []
                                        },
                                        "yAxis": [{
                                            "title": {
                                                "text": "(V)"
                                            }
                                        }],
                                        "xAxis": [{
                                            "plotBands": [{}]
                                        }],
                                        "plotOptions": {
                                            "series": {
                                                "dataLabels": {
                                                    "enabled": false
                                                }
                                            }
                                        },
                                        "legend": {
                                            "layout": "vertical",
                                            "enabled": false,
                                            "align": "center",
                                            "floating": false
                                        },
                                        "annotations": [{}],
                                        "tooltip": {
                                            "shared": false
                                        },
                                        "credits": {
                                            "text": " ",
                                            "enabled": false
                                        },
                                        "accessibility": {
                                            "describeSingleSeries": false
                                        }
                                    };
                                    new Highcharts.StockChart("highcharts-67f948af-71a4-4556-ad25-ec142f0f406f", options);
                                }
                            }
                        })();

Answer 1

You can use afterSetExtremes event and set right xAxis extremes for other charts:

events: {
    afterSetExtremes: function(e) {
        for (var i = 0; i < 2; i++) {
            Highcharts.charts[i].xAxis[0].setExtremes(e.min, e.max, true, false);
        }
    }
}

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

API Reference: https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes