Highcharts rangeSelector ytd

0
votes

I have a highstock chart with navigator synced with 4 highcharts graphs. I'd like to initially display YTD on all 5 charts, but the following gives me an xaxis error. Looks like it needs to be set after all charts are rendered. I've tried several places to no avail.

rangeSelector: {
    selected: 3
},

Any suggestions?

If it's not too much trouble,here's the site I'm working on. The code of 5 charts is too lengthy to display here. Click on any icon.

1
highchartshighstock

1 Answers

2
votes

The problem is that setting rangeSelector.selected: 3 triggers your xAxis.events.setExtremes function, which refers to your other charts that have not yet been initialized, and it causes an error.

To fix this you could simply move your chart1 constructor to the end, and do the other charts first.

In short:

$('#container2').highcharts({
    // ...
});
$('#container3').highcharts({
    // ...
});
$('#container4').highcharts({
    // ...
});
$('#container5').highcharts({
    // ...
});
$('#container1').highcharts('StockChart', {
    rangeSelector: {
        selected: 3
    },
    xAxis: {
        events: {
            setExtremes: function (e) {
                var thisMin = e.min,
                    thisMax = e.max,
                    chart2 = $('#container2').highcharts();
                chart3 = $('#container3').highcharts();
                chart4 = $('#container4').highcharts();
                chart5 = $('#container5').highcharts();

                chart2.xAxis[0].setExtremes(thisMin, thisMax);
                chart3.xAxis[0].setExtremes(thisMin, thisMax);
                chart4.xAxis[0].setExtremes(thisMin, thisMax);
                chart5.xAxis[0].setExtremes(thisMin, thisMax);
            }
        }
    },
    // ...
});