How to bring the marker in front of the data label for a scatter chart?

[delisia]

For my use case, the marker should be placed in front of the data label. I am unable to achieve this.

Here is the jsfiddle link: https://jsfiddle.net/dphilip/cvqsun1z/36/
I would like to bring the red marker for scatter charts in front of the label when there are multiple charts present.

If we take a look at the DOM created, the marker is drawn as the same level as the area chart. The labels should be in between the area chart and the marker. Since they are placed in different groups, I am unable to place the label in between area and marker.

I tried adding zIndex, but it does not have any influence on the marker position. I would like to place the marker in front of the data label.

Any help would be appreciated. Thank you.

[dominik.c]

Hello delisia!

We appreciate you reaching out to us!

I suggest setting the zIndex property on the dataLabels to 1. Then the markers will be displayed in front of the dataLabels.

Demo: https://jsfiddle.net/BlackLabel/3tLdc9pk/

Best regards!

[delisia]

Thank you Dominik.

This solution indeed works great when there is a single chart.

Unfortunately, in case of multiple charts(scatter chart and area chart), if I set the zIndex property on the dataLabels to 1 for scatter charts, the label is shown behind the area chart.

See jsfiddle example ( https://jsfiddle.net/dphilip/cvqsun1z/)

[dominik.c]

Hi again!

Unfortunately, dataLabels are in the same group as the series so they could be in front of every series or behind all of them. There's no API option to do it differently. The problem was discussed there: https://github.com/highcharts/highcharts/issues/3321

Here's a little workaround: http://jsfiddle.net/2pLkj34k/

Best regards!