Arearange serie label is not displayed when onArea:true

[jloscos]

Expected behaviour

On an arearange serie, a label with onArea:true is displayed inside the area.

Actual behaviour

The label is not displayed

Live demo with steps to reproduce

https://jsfiddle.net/v73pu4z5/

Product version

Highcharts 8.2.2

Affected browser(s)

Tested on Chrome 86

[PaulDalek]

Hi @jloscos

Thank you for reporting this issue. It looks like this option works for area but it doesn’t for arearange series.

Simplified demos
https://jsfiddle.net/BlackLabel/89ro3Lc5/ - area (label displays)
https://jsfiddle.net/BlackLabel/a9xd0srh/ - arearnage (label doesn’t display)

Internal note
It seems that in case when the option onArea is set to true on arearange series, the results from the drawSeriesLabels is an empty array, preventing from setting the x and y of a label (in a result label is destroyed).

[jakubjanuchta]

Should we add the label.onArea: true functionality to arearange series?

There would be many cases, in which the label cannot be placed inside the area, see: https://jsfiddle.net/BlackLabel/Lvs6argt/
I'm wondering if that wasn't implemented for the arearange on purpose?

Although, when label.onArea: true for area series and the label has no place inside to position, it is automatically hidden, so we could implement the same behavior for the arearange, see: https://jsfiddle.net/BlackLabel/gLhakwnq/

One more thing is that, sometimes, even though label.onArea: false for arearange series, the label is drawn inside the area, see https://jsfiddle.net/BlackLabel/njszxhd8/
Should it behave like that?

What do you think, @TorsteinHonsi ?

[GaryGen]

@jakubjanuchta What is the behavior for Area series or Stacked Area series as the values approach zero? Technically, this doesn't seem any different, but onArea is supported well in those cases.

[jakubjanuchta]

@GaryGen As you can see on the demo below, the label disappears when it has no physical place to position (if you change the label.style.fontSize from 12px to 8px, the label will appear as there is enough space for it.

https://jsfiddle.net/BlackLabel/qfvgyrsh/

[TorsteinHonsi]

One more thing is that, sometimes, even though label.onArea: false for arearange series, the label is drawn inside the area, see https://jsfiddle.net/BlackLabel/njszxhd8/ Should it behave like that?

Yes, when onArea is false, the algorithm looks for the best placement near the graph line, just like a regular line series. If that best placement is below the line, it will render on top of the area.

There would be many cases, in which the label cannot be placed inside the area, see:

The same is the case for area series.

What do you think, @TorsteinHonsi ?

I think we should try to make this work. We already have it working for stacked area, and an area range is not much different. My guess is that it is just about finding some glitch in the algorithm.

Debugging tip for @jakubjanuchta : We know that it works correctly for this area stack: https://jsfiddle.net/highcharts/ouavsq2m/2/ . So compare that to an arearange with the exact same geometry: https://jsfiddle.net/highcharts/ouavsq2m/3/ . Now you can inspect the series-label module and find out what causes the difference.