bbs10
Posts: 6
Joined: Mon Mar 21, 2022 4:00 pm

Tooltip with pattern colors

Hi, I'm trying to format tooltip with circle matching series pattern colors and right align just the numbers in each row.

https://jsfiddle.net/ku5e6Ldb/1/

I'm having difficulty to get it display in right format
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Tooltip with pattern colors

Hello,

You had a typo in the useHtml property, it should be useHTML. As a result, it did not generate an HTML table.

Demo: https://jsfiddle.net/BlackLabel/62dg3nsf/
API: https://api.highcharts.com/highcharts/tooltip.useHTML

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
bbs10
Posts: 6
Joined: Mon Mar 21, 2022 4:00 pm

Re: Tooltip with pattern colors

Thanks. Appreciate the quick response.
Also can you point me how I can get the tooltip circle display the pattern of the chart. RIght now it just matches the color only, not the fill pattern

https://jsfiddle.net/4qj23dsv/
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Tooltip with pattern colors

Hello,

I have not noticed this before. When we set useHTML to true, we cannot use a pattern on the HTML element and we need to create a circle using SVG and then set the pattern to it.

Demo: https://jsfiddle.net/BlackLabel/qxLwf5h4/

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”