How can you align the left and right Y-axes of vertically stacked HighCharts charts?

Question

I have a set of HighCharts line charts that are in containers that all have the same width. These containers are stacked one on top of the other in a column. All the charts are against the same x-axis domain by design. However, because the orders of magnitude of the y-axis data in each of these charts differs, the amount of space used to the left of the primary and right of the secondary y-axes is coming out variable. The result is that the x-axis of each chart in the column is variably squished and the data points for the same x-value don't align visually. Here's an example, note that the bottom-most chart is not aligned to the two above it:

Is there a way to calculate or otherwise set up a situation using the HighCharts API where I can coerce all the charts to take up the same width between the primary and secondary y-axes across all three charts?

Answer 1

You can set fixed marginLeft and marginRight for all charts:

chart: {
    marginLeft: 50,
    marginRight: 20
}

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

API:

https://api.highcharts.com/highcharts/chart.marginRight

https://api.highcharts.com/highcharts/chart.marginLeft

Or you can calculate the margins dynamically:

charts.forEach(function(chart) {
    maxPlotRight = Math.max(
        chart.chartWidth - (chart.plotLeft + chart.plotSizeX),
        maxPlotRight
    );
    maxPlotLeft = Math.max(chart.plotLeft, maxPlotLeft);
});

charts.forEach(function(chart) {
    chart.update({
        chart: {
            marginLeft: maxPlotLeft,
            marginRight: maxPlotRight + 10
        }
    })
});

Live demo: http://jsfiddle.net/BlackLabel/6ubh8zj7/

API: https://api.highcharts.com/class-reference/Highcharts.Chart#update