Aligning right y axis values with left y axis values

Ask the community
1

Hello-

I am trying to align the two y axis. In the link below, I am trying to get the right y axis to align with the left y axis.

For example, right now “6.5” in the in the right y axis aligns with approximately “14” on the left y axis where I would like it to align with the maximum left y axis which is currently has a value of “15”.

Thanks!
-Ad’m

2

Hi Ad’m

This part is tricky because you’re hard-coding tickPositions on both axes. When you do that, Highcharts ignores your min and max values, since the fixed ticks fully control the scale. That makes it unclear what range you actually want to display. Could you clarify what behavior you’re aiming for?

Thank you

Best regards,
Havard

3

Thanks for the response!

I would like the “6.5” n the right side to align with the “15” on the left side, the “2.5” on right side to align to the “3” on the left side, and the remaining values on the right side to be evenly spaced inbetween.

Thanks!
-Ad’m

4

Hi Ad’m,

This one is a bit tricky because the left and right y-axes use different scales, so aligning values like 15 → 6.5 and 3 → 2.5 requires proportional mapping rather than just spacing the ticks evenly.

You can keep the axes consistent by using this custom code: Everviz example

Paste this code in Customize → Custom code section

Highcharts.merge(true, options, {
    yAxis: [
        {
            // Left yAxis (unchanged)
            title: {
                text: "<div>Unemployment rate (%)</div>",
                useHTML: true,
                style: { "color": "#000000" }
            },
            min: 3,
            max: 15,
            gridLineWidth: 1,
            labels: { style: { "fontSize": "12px", "color": "#000000" } },
            tickPositions: [3, 5, 7, 9, 11, 13, 15]
        },
        {
            // Right yAxis (aligned with left)
            opposite: true,
            index: 1,
            title: {
                text: "<div>Share of labor force (%)</div>",
                useHTML: true,
                style: { "color": "#000000" }
            },
            min: 2.5,
            max: 6.5,
            gridLineWidth: 0,
            labels: { style: { "fontSize": "12px", "color": "#000000" } },
            tickPositioner: function () {
                var leftAxis = this.chart.yAxis[0];
                var leftMin = leftAxis.min, leftMax = leftAxis.max;
                var rightMin = 2.5, rightMax = 6.5;
                var ticks = [];

                leftAxis.tickPositions.forEach(function (leftVal) {
                    var ratio = (leftVal - leftMin) / (leftMax - leftMin);
                    var rightVal = rightMin + ratio * (rightMax - rightMin);
                    ticks.push(+rightVal.toFixed(2));
                });

                return ticks;
            }
        }
    ]
});

image
image558×454 37 KB

This ensures that:

  • Left 3 aligns with Right 2.5
  • Left 15 aligns with Right 6.5
  • All intermediate ticks are proportionally spaced for a consistent visual alignment.

Best Regards,
Faria