drmrbrewer
Posts: 248
Joined: Sat Sep 06, 2014 6:39 pm

Re-colour data labels to match areasplinerange high/low lines

This is a kind of follow-on from the topic discussed here: viewtopic.php?f=9&t=38588

The following shows an example which re-colours the data labels to match the colour of the gradient colour:

https://jsfiddle.net/3uca0f9e/

I want to extend this now to an areasplinerange series type... the following is an attempt at this:

https://jsfiddle.net/h8vsuyn3/

It comes close, though both low and high labels take on the same colour, which isn't ideal.

But note that the labels on the 'high' line (which crosses over the 'low' line... but it remains the 'high' line still I suppose) appear at least to be the right colour.

This might be OK, because actually I want to hide the labels on the 'low' line.

The following is quite close to what I want to achieve, with highLabelsOnly set to true so that only the labels for the high line are shown, not for the low line:

https://jsfiddle.net/4fym8dcr/

But the above is for SVG labels, and actually I need to make this work for html labels with useHTML set to true.

This is my attempt, with highLabelsOnly set to true:

https://jsfiddle.net/9xh2rfbc/

Something is not quite right... the low labels are hidden but the high labels aren't coloured correctly.  

I'm not really sure what I'm doing wrong.

Basically I am aiming for:

  • areasplinerange series type
  • html labels with useHTML set to true
  • show labels on the 'high' line only, or the 'low' line only, or both (controlled by a variable)
  • correct colour labels for both high and low, to match the gradient line/fill at the high/low point
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Re-colour data labels to match areasplinerange high/low lines

Hello,

Setting useHTML to true in dataLabels will mean that the labels will be above the tooltip and there is no way to fix it (article about that). Are you sure you want to go in this direction?

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
drmrbrewer
Posts: 248
Joined: Sat Sep 06, 2014 6:39 pm

Re: Re-colour data labels to match areasplinerange high/low lines

Yes, I'm sure I want to go in this direction because my HTML data labels are actually wrapped inside SVG, so that they do not actually sit above the tooltip... using this solution here: https://github.com/highcharts/highchart ... -907205100 (I wish there was an explicit option to put the HTML labels inside SVG like this, so that there would be no need for this workaround, but the workaround works fine anyway... I think it should be the default behaviour to have everything inside SVG)...

Anyway, I hope that you can find a solution to the original question :-)
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Re-colour data labels to match areasplinerange high/low lines

Hi,

Oh, I didn't even realize there was such a workaround for this

So it was necessary to rewrite this code a bit because it did not include 2 labels for one point. It took me a while, but it can be achieved in the same way as in the demo below.

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

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”