in tooltip not showed color-pattern

[cybermerlin]

in tooltip not showed color-pattern - only black for all labels

[ansonhoyt]

I'm seeing the same thing, but only when I use certain HSLA or HSL colors. It seems to effect only hue with decimal places (e.g. 360.0). These "high-precision" colors work on the chart's line and background, in the legend's line and background, but show black in the tooltip's line and background.

Colored in chart and tooltip (work as expected)

• hsla(360, 100.00%, 50%, 1), hsl(360, 100.00%, 50%)
• rgb(100%, 0%, 0%), rgb(255, 0, 0), #f00, #ff0000, hsla(360, 100%, 50%, 1), hsl(360, 100%, 50%)

Colored in chart, but black in tooltip:

• hsla(360.0, 100.00%, 50%, 1), hsl(360.0, 100.00%, 50%)

The decimal places in "hue" values seems to be the common denominator. Using 360 works, but 360.0 doesn't.

[ansonhoyt]

Unrelated, but I learned something while testing syntax variations. Explicitly specifying hue's units works only in Firefox. The W3C HSL color spec says the number is unitless and degrees are implied. Firefox HSL color syntax implies degrees, but also allows explicitly using deg, rad, grad, or turn.

So hsl(360deg, 100%, 50%) on charts works in Firefox but not Chrome/Safari/Edge.

[etimberg]

@cybermerlin I think this is a duplicate of #4279 and a PR was opened in #4284 however the changes we requested still need to be made. Happy to look at a different PR for this issue.

In the meantime, I am closing this as a duplicate of the earlier issue.

Regarding the 360.0 degree, I believe that is related to the regex used in chartjs/chartjs-color-string#2 but the better solution is to update our fork of the color string lib. I believe @simonbrunel was thinking of trying that out