The arearange series isn't working in parallel coordinates

[raf18seb]

Expected behaviour

Let's consider this arearange data:

data: [
      [23, 25],
      [-1, -0.5],
      [1.5, 4],
      [1.5, 5],
      [4, 5]
]

The arearange series should be displayed like this:

Actual behaviour

With the above data, the arearange series is displayed incorrectly:

To display it correctly, we need to correct the data - calculate the high value based on the first yAxis scale:

data: [
      [23, 25],
      [-1, 23.5],
      [1.5, 25],
      [1.5, 26],
      [4, 24]
]

Live demo with steps to reproduce

Real data, not working: https://jsfiddle.net/BlackLabel/qobuj3tp/
Corrected data, but obviously it shouldn't work like that: https://jsfiddle.net/BlackLabel/kmgh8fad/

Product version

Highcharts 9.1.0

[cfarmerga]

I encountered this issue when trying to use a polar chart, and I was happy to see this suggested workaround, but the workaround doesn't seem bulletproof for me, at least in the polar case. I have a demo jsfiddle at https://jsfiddle.net/cfarmerga/2tj7hLwz/

In my example, I see that the success of this workaround seems related to the size of the chart. It seems like there's a variable padding at the axis minimum which depends in part on the size of the chart. This seems to cause my attempt to transform the "high" value to ultimately be incorrect, leading to a displayed arearange that's incorrect at that axis.

I added an extra "min line" line type series to just see where the min values for each axis were plotted, and I think I expected this series to be rendered as just a single point at the intersection of the axes, but it seems to extend into the axis unexpectedly, and also is dependent on the chart size.

I'd be happy using this workaround for a while, but I don't know how to account for this dependence on the chart size.

Both these chart screenshots below are using identical data and configuration and differ only by the size of the rendered div.
They are shown in the jsfiddle.

Chart at height=400px

Chart at height=800px

[karolkolodziej]

To make it fully bullet prove you have to make sure that each chart's axis is going to look exactly the same.
Especially you have to make sure that it is going to have the same ticks by for example setting a fixed tickAmout or even ticksPositions.
As you can see from the screens above the RotB axis has a max of 15 in the first case and 12 in the second.

Demo: https://jsfiddle.net/BlackLabel/czusb1q8/

[cfarmerga]

Hmm. This example doesn't seem to work well. The RotB axis looks correct, that's true, but other axes' arearanges are off now. I'd like to to be able to draw accurate arearanges for any arbitrary number of axes and axis min/max ranges. I would be ok with using a common tickAmount if needed, but this example doesn't seem sufficient to solve that.