CODEWITHSUNDEEP
javascripthighcharts
dhrm
dhrm

Reputation: 14934

Highchart multiple axes - sync axes on multiple charts

I've two Highcharts with multiple axes. The two set of axes represents the same units and the two charts are horizontal aligned. I've created a JSFiddle to illustrate my setup based on a Highchart sample:

http://jsfiddle.net/dennismadsen/gbbzz2jh/

Highchart multi axes sample

In this example you can zoom on the y axis on the chart to the left. Please note that the axes on the right chart are synchronized. That's done using this afterSetExtremes event:

function syncYAxis(e) {
    var thisAxis = this;
    var thisChart = e.currentTarget.chart;

    Highcharts.each(Highcharts.charts, function (chart) {
        if (chart && chart !== thisChart) {
            var currentAxis = chart.get(thisAxis.options.id);
            currentAxis.setExtremes(e.min, e.max);
        }
    });
}

If I change the right chart to a different Highchart, that does no longer work. See this JSFiddle:

http://jsfiddle.net/dennismadsen/kmuhw0zf/

I've tried to debug and added a afterSetExtremes event to the right chart axes:

function rightChartAxisChanged(e) {
    var thisAxis = this;
    console.log('Right chart axis changed: '+thisAxis.options.id);
    console.log('min/max: '+e.min+','+e.max);
    console.log('user min/max: '+e.userMin+','+e.userMax);
}

From what I can see, it seems that the new min/max values in e.min and e.max are computed wrong. The correct values that I've given in the setExtremes call in the syncYAxis, are stored in the e.userMin and e.userMax.

Upvotes: 3

Views: 1252

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

Well, I tried your demo ( http://jsfiddle.net/dennismadsen/kmuhw0zf/ ) - it works fine, except sometimes it fails. Anyway, I would improve logic with tickPositioner for the second chart: so ticks will always get the same numbers as in the first one, for example: http://jsfiddle.net/kmuhw0zf/3/

        tickPositioner: function () {
            return $('#chart1').highcharts().get('axis1').tickPositions.slice();
        },
        id: 'axis1',

Additionally, you can set alignTicks to false, so it will prevent Highcharts logic to force ticks at specific places.

And regarding e.min/e.max vs a.userMin/e.userMax - you can set for example max = 32.1235 and this will be stored in e.userMax, but chart will render max = 35 (for a nice tick number), so e.max will be 35. Note, that for me your both demos works fine (except issue with alignTicks).

Upvotes: 2

Related Questions