series.column.dataLabels are always contrasted if stacking != undefined

[schmidhannes]

When using plotOptions: { column: { stacking: 'normal' } } dataLables are always contrasted. This is a problem when using inside: false on series.column.dataLabels as well.

Expected behaviour

DataLabels outside of the column are not contrasted:

Actual behaviour

DataLables outside of the column are contrasted:

Live demo with steps to reproduce

https://jsfiddle.net/78oxr3mw/

Product version

Highcharts 8.1.2

Affected browser(s)

Chrome 84, Firefox 79, Firefox ESR 68

[sebastianbochan]

Hi @schmidhannes,
Thank you for reporting. The contrast color is applied by default (when stacking). You can edit it by the style.color option.

Demo:

• https://jsfiddle.net/BlackLabel/uwmde3gq/

[schmidhannes]

HI @sebastianbochan,
thanks for the reply.

I was aware of that option, but I wondered if the default contrasting when stacking could be considered a bug? This seems to be related to issue-6657, since the contrast is applied without taking the position of the label and the background color at the position into account.

Please let me know if that sounds reasonable.

[pawelfus]

Hi @schmidhannes

Might be considered as a bug, or at least as an improvement. inside and stacking options are equal, that means setting one of them to true forces contrast color. Background color is not considered when setting contrast color, only point's item (bar, slice etc), from our docs:

Highcharts picks up and applies the maximum contrast to the underlying point item, for example the bar in a bar chart.

In stacking, most likely you will use multiple series: https://jsfiddle.net/BlackLabel/2smzncge/ - that's why contrast color is by default enabled.

What we could improve is to check, before applying contrast, if series is the last one in a stack. What do you think?

[schmidhannes]

HI @pawelfus,
thanks for the clarification. I had not seen that specific part in the docs and misinterpreted the bugfix made for the closed issue I mentioned.

The check for the last stack in a series would solve my issue - in my use case I mostly have two or more stacks in a series, but for simplicity I used the "real" minimal reproduction.
The check should only be performed with stacking: true and inside: false though. Otherwise one could end up with a black label inside a black bar, breaking most other use cases.

[schmidhannes]

Hi, are there any updates regarding this issue?

As can be seen in jsFiddle example, the labels are still always contrasted, even if located outside of the column. Furthermore, I do not see a reason why stacked column charts should force dataLabels contrast and ignore the label's background, while non-stacked ones don't.

[raf18seb]

Hi @schmidhannes!

Sorry, but we didn't have a chance to prioritize this issue, especially since it's not so popular request and can be easily bypassed by setting the dataLabels.style.color like suggested above: https://jsfiddle.net/BlackLabel/hnL4y8ce/

[tsmanesh]

Hi @raf18seb @sebastianbochan
Why we need check stacking getContrast function ,
here stacking check applicable for non stacked charts also, is there any fix for this?

iam overriding contrasted method like below

 // override getContrast function
  (function(H) {
    H.Renderer.prototype.getContrast = function(rgba) {
      rgba = H.Color(rgba).rgba;
      return rgba[0] + rgba[1] + rgba[2] > 500 ? '#000000' : '#FFFFFF';
    };
  }(Highcharts));

here replacing colors our own colors insted of #000000 #FFFFFF

in my case column chart its non stacked chart , it always undefined when we are overriding getContrast method returning correct value in my case , but below SS we have check like stackingalways 'undefined ' in my case . here it's returning #000000 color instead of defined me own

can u guys please help how can i overcome this one
setting color as : color:'contrast'
before overriding color property shows as

color
: 
"contrast"

after overriding it's returning below instead of

color
: 
"#000000". // returning color
 "#xxxxx". // excepting my own color
 here i'm not define  'staking '

current version : "highcharts": "^10.0.0",

[karolkolodziej]

Hi @tsmanesh!
Could you please share a simplified demo of your issue?

[tsmanesh]

thanks for ur reply @karolkolodziej
iam unblocked this issue , thanks

[hubertkozik]

Hi! I've prepared a workaround for this issue. It is based on the last point of stack (checking point.stackY and point.stackTotal). If you want to use it in your project simply copy-paste the quite long IiFE function with plugin.

Workaround: https://jsfiddle.net/BlackLabel/xv1pzeft/

Internal note:
It works well also if reversedStacks are disabled: https://jsfiddle.net/BlackLabel/ve2ztha9/