Highcharts synchronization with multiple yaxis

Question

I have two charts that are synchronized. They have a margin left to make sure they are uniformly aligned. I have situations where I have multiple yAxis that can get turned on and they are on the right side opposed to the left. I attempted to use the same marginRight approach but when a second, third, or fourth axis gets added to the right it won't show up because there isn't enough room. So I am dealing with a dynamic amount of space over there on the right side. Highcharts handles the dynamic aspects when it's just one chart but I need my second chart to have the same margin even tho it doesn't have these additional yAxis. It's important that this time series data remains aligned in the two charts.

What is the approach to handle this?

UPDATE:

I created a simple jsFiddle here: http://jsfiddle.net/28hrffv7/ In my real-world example, I have showEmpty set to false and a series which is hidden by default.

{ opposite: true,  title: { text: 'Random Text' }, showEmpty: false}

When they turn it own the series is rendered and the axis and title is added. This example shows that the first charts doesn't realize that the 3rd chart has 3 axis and as a result should have more marginleft

Update 2: Updated JS fiddle to show the more dynamic nature of the problem. When you toggle a series in the legend you can observe axes getting added and removed which is feature that is wanted. What is required is to keep all the charts synchronized in the width of the plotable area so they all line up correctly. http://jsfiddle.net/28hrffv7/3/

1) You could use a callback function to capture the right margin when an axis is added, and update the other chart accordingly, maybe? 2) Post a fiddle of your code, and you'll almost always get better help. — jlbriggs
The callback would work but i need to know where/how i would attach it. I am working on the jsfiddle but i need to boil it down to just the issue before posting it. — Nexeh
Presumably you have a function to add the axes to the charts - add your code to retrieve and update the margins there. — jlbriggs
@jlbriggs I do not. This is controlled by highcharts. I updated the jsfiddle to show that by enabling a series in the legend the axes is added to the side. jsfiddle.net/28hrffv7/3. When this happens you can see the charts no longer line up. I need a way to make sure they do. Like you said, respond to a notification that the margin of a chart has changed and to share that with all other charts. I am in an Angular 2 application. — Nexeh

Kacper Madej Kacper Madej · Accepted Answer · 2016-09-12T14:54:07

You could hard-code marginRight as well as marginLeft.

Demo #1: http://jsfiddle.net/28hrffv7/1/

Or check which marginRight is the highest and update all chart with the new setting. Relevant part of the code:

                }, {
                    data: []
                }]
            }, function(chart){
                if (chart.marginRight > topMarginRight) {
                topMarginRight = chart.marginRight;
                console.log(topMarginRight);
              }
            });
    }); // end of the each function creating the charts
    $.each(Highcharts.charts, function (i, chart) {
        chart.margin[1] = topMarginRight;
      chart.isDirtyBox = true;
      chart.redraw(false);
    })

Demo #2: http://jsfiddle.net/28hrffv7/4/ (for Highcharts < 5.0.0)

UPDATE:

With Highcharts 5+ the same is possible through a chart update.

    $.each(Highcharts.charts, function (i, chart) {
        chart.update({
        chart: {
            marginRight: topMarginRight
        }
      });
    })

Demo #3: http://jsfiddle.net/28hrffv7/5/

In case of multiple series in each chart you could call a custom function for events like load, redraw, afterAnimate.

Demo #4: http://jsfiddle.net/acjaLxj1/1/

Highcharts synchronization with multiple yaxis

1 Answers