garygen
Posts: 29
Joined: Wed Nov 11, 2015 3:51 pm
Location: Gainesville, FL
Contact: Website

DataLabel Style Font Color Glitch when Color Name Used

I am trying to change the color of the dataLabel font like this.

Code: Select all

            dataLabels: {
                enabled: true,
                style: {
                    color: 'Red'
                }
            }
Unfortunately, somewhere in the transition, setting the color of the font interferes with the highcharts-text-outline as seen here:
https://jsfiddle.net/GaryGen/m8ovs04f/9/

I noticed in the dataLabels.color example used "color: '#e00000'" This works and does not have the extra information, so the issue appears to be directly related to colors by name.

I also noticed the dataLabels.style help indicates "When useHTML is true, the textOutline will not be picked up." However, useHTML did not appear to affect the outcome.

Note: I am in the process of upgrading from 4.2.3 to 10.3.3,. It used to work, but I am unsure at what point this bug was introduced.
garygen
Posts: 29
Joined: Wed Nov 11, 2015 3:51 pm
Location: Gainesville, FL
Contact: Website

Re: DataLabel Style Font Color Glitch when Color Name Used

Correction, the sample value of "#e00000" works, but the value of "#ff0000" does not. Therefore, the issue is not directly tied to whether it is a color name, but rather another characteristic of the color.
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: DataLabel Style Font Color Glitch when Color Name Used

Hi,

Thanks for reaching out to us with your inquiry!

Described behaviour with text outline isn't an issue or a bug, and it's related directly to accesibility compliance. Contrast function has been upgraded in Highcharts v10.2.0: https://www.highcharts.com/blog/changel ... ts-v10.2.0 and is linked to an issue were some dataLabels didn't have enough contrast according to WCAG and W3C contrast guidance.

Fixed issue: https://github.com/highcharts/highcharts/issues/17273

Let me know if my explanation is satisfactory for you!
Best regards!
Jędrzej Ruta
Highcharts Developer
garygen
Posts: 29
Joined: Wed Nov 11, 2015 3:51 pm
Location: Gainesville, FL
Contact: Website

Re: DataLabel Style Font Color Glitch when Color Name Used

Hi,
Thank you for your reply. Unfortunately, while this is "working as designed", it is also unusable. PLEASE tell me there is a way to turn it off since it appears to be in effect even without the accessibility module loaded.

As shown in the provided example, the numbers are blurred to the point of being illegible. Adding a huge outline around a character does NOT improve contrast/readability since it loses the general shape of the character. All previous examples I have seen in other products/charts of improving contrast of small fonts relies on creating a solid, rectangular background. The "highlight" should only enhance and not distract from what you are trying to emphasize.

Also, this behavior is not consistent across the product. For example, axis labels are not given the same treatment (see your example: https://jsfiddle.net/gh/get/library/pur ... els-style/).

I understand wanting to be compliant with standards, but it needs to be done in such a way that the product is still usable, not just for the sake of checking a box.

Best Regards,
-Gary Geniesse
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: DataLabel Style Font Color Glitch when Color Name Used

Hi,

Fortunately for your case, there is a property textOutline in dataLabels.style, that alllows to turn it off. In addition to turning it off, you might also set backgroundColor to preserve correct contrast in data label.

Live demo: https://jsfiddle.net/BlackLabel/da3vbk82/

API:
https://api.highcharts.com/highcharts/p ... extOutline
https://api.highcharts.com/highcharts/p ... roundColor

Let me know if this solution suits your needs.
Best regards!
Jędrzej Ruta
Highcharts Developer
garygen
Posts: 29
Joined: Wed Nov 11, 2015 3:51 pm
Location: Gainesville, FL
Contact: Website

Re: DataLabel Style Font Color Glitch when Color Name Used

Thank you for your reply!

Since our users can customize their colors, setting the background color for them is not an option.

We will use your suggestion of disabling the textOutline feature completely to move forward.

Please note that we are not against accessibility and plan to include your accessibility support after we evaluate it more fully. However, please re-evaluate this particular approach for providing contrast since making the text illegible is honestly not an option.

Best Regards,
-Gary Geniesse
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: DataLabel Style Font Color Glitch when Color Name Used

For now I would reccomend using textOutline as a workaround. I found an issue on Higcharts repository that covers similar problem: https://github.com/highcharts/highchart ... 1383803801. You can add your feedback there and upvote this issue so it might get fixed in near future.

In case of any other questions, feel free to contact us anytime.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Usage”