Как вы можете выровнять левую и правую оси Y диаграмм HighCharts с вертикальной компоновкой?

Question

У меня есть набор линейных диаграмм HighCharts, которые находятся в контейнерах одинаковой ширины.Эти контейнеры располагаются один над другим в столбце.Все графики соответствуют одному и тому же домену оси X по своему дизайну.Однако, поскольку порядки величины данных по оси Y в каждой из этих диаграмм отличаются, объем пространства, используемого слева от первичной и правой от вторичных осей Y, выходит за пределы переменной.Результатом является то, что ось x каждой диаграммы в столбце по-разному сдавливается, а точки данных для одного и того же значения x не выровнены визуально.Вот пример, обратите внимание, что самый нижний график не выровнен по двум вышеупомянутым:

Есть ли способ расчета или иным образом установитьсоздать ситуацию с использованием API HighCharts, где я могу заставить все диаграммы занять одинаковую ширину между первичной и вторичной осями y на всех трех диаграммах?

Answer 1

Вы можете установить фиксированные marginLeft и marginRight для всех графиков:

chart: {
    marginLeft: 50,
    marginRight: 20
}

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/xsuc7aeg/

API:

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

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

Или вы можете динамически рассчитывать поля:

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
        }
    })
});

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6ubh8zj7/

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