Maintaining high contrast datalabels with useHTML

[luujam1]

please see fiddle: http://jsfiddle.net/gv8jfa0x/

I have a datalabel with useHTML switched on. Is it possible to get the default high contrast styling enabled for the HTML? i.e. the white text with the black outline / the black text with the white outline depending on what the colour of the column is. If I switch off useHTML then the datalabel is styled appropriately.

Thanks

[kamil.k]

Hello there,

By default, the dataLabel is an SVG element which the defined stroke property. By using the useHTML property, the HTML tags are rendered instead. All you need to do is to apply default CSS styles to your HTML elements.

I have updated your demo using text-stroke and text-shadow styling. Please, take a look: https://jsfiddle.net/BlackLabel/uwLhozkb/

Let me know if that works for you,
Kind Regards!

[luujam1]

Thanks for the response! So the stroke property applied in the demo is fine when the text colour is white. however when the text colour is black, the outline doesn't pick up on this and creates a black outline still. Is it possible to hook on to when the text colour changes?

this is what it looks like:
https://jsfiddle.net/05sebdkc/

ideally want it to look like this when text colour is black:
https://jsfiddle.net/15nxd76e/

[kamil.k]

Inside the formatter method, you can access the particular element by defining this keyword and get its color on which you can base the logic.

I have updated the demo for better visualization, see: https://jsfiddle.net/BlackLabel/ksq49e7j/

Let me know if you found it useful,
Regards!

[luujam1]

I guess you could conditionally set the datalabel text-stroke depending on a set of colours based off your example but I have a large set of colours for the columns which I'd like to set the text colours on. is there a way in which I can utilise what highcharts uses to determine text colour?
example with black columns. white text is used:
https://jsfiddle.net/3vrwg7y0/

example with red columns. black text with white outline is used:
https://jsfiddle.net/csa6z4ef/1/

[kamil.k]

Inside the formatter method you can refer to the contrastColor property on the point instance which reflects the current contrast. I have updated the demo for better visualization, see: https://jsfiddle.net/BlackLabel/rsjmt4cq/

I hope you will find it useful,
Regards!

[luujam1]

that's awesome, thanks!

[kamil.k]

You're welcome!

Feel free to ask any further questions,
Regards!