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