dataLabel color should be able to apply contrast color when it's in the bar chart

[tkforce]

Description of the feature

According to the documentation for series.bar.dataLabels.color : https://api.highcharts.com/highcharts/series.bar.dataLabels

The text color for the data labels. Defaults to undefined. For certain series types, like column or map, the data labels can be drawn inside the points. In this case the data label will be drawn with maximum contrast by default. Additionally, it will be given a text-outline style with the opposite color, to further increase the contrast. This can be overridden by setting the text-outline style to none in the dataLabels.style option.

It seems that the contrast color for data label will only exist in type: column
https://www.highcharts.com/demo/column-comparison

But I think it's also very useful in ordinary bar chart where data labels sometime gets pushed into the bar:
https://codesandbox.io/s/elated-jones-i5y7qo?file=/src/App.js:774-784

Is it possible to apply this auto contrast color for dataLabel in bar chart? Or are there any workarounds that you'd suggest me to try it out?

Library related to the feature

Highcharts

Proof of Concept/Live example for the feature

https://codesandbox.io/s/elated-jones-i5y7qo?file=/src/App.js:774-784

---

You can vote for this feature by adding a thumbs-up reaction to this post.

[pawellysy]

Hello @tkforce, thanks for creating this issue.
This feature is already working: https://jsfiddle.net/BlackLabel/9b1p5vkn/181/

(As well as on react example https://codesandbox.io/s/dark-paper-bioxzi)

The first color of the Highcharts color palette (bluish) is best contrasted by black. We recently improved our algorithm for calculating the best contrast color here: #17273

This algorithm hasn't been released yet, so in the next release, it will be available.
Let me know if there is anything that I overlooked. If not, I will close this ticket, as already implemented :) Thanks!

[tkforce]

Hi @pawellysy
From the example you provided, all the labels are placed within the bar using inside: true, but what we want is all the labels should be placed next to the bar unless there're not enough space left for those extremely long bars. But the color: 'contrast' doesn't seems to work on those circumstances right?
https://codesandbox.io/s/keen-sid-l3dyom

[raf18seb]

Works fine with inside: false, see demo: https://codesandbox.io/s/flamboyant-edison-k2fg7h

[tkforce]

I see it now, apologize for not recognizing the first bar in my example is already using "contrast" color.
But dose this contrast color only consider the color of the bar rather than the background color?

In light mode, those label colored perfectly:

However in dark mode, the color of the labels doesn't seems to response to the background:

[pawellysy]

Hi again! Currently, the dataLabel's contrast color only takes into account the value of the corresponding point's color.
As a feature, we could add the evaluation based also on the background color. Here is the workaround: https://jsfiddle.net/BlackLabel/9b1p5vkn/183/

Thanks for the suggestion!