Can Chart.js use HTML to render chart data labels?

[oajiboye]

Hi everyone

I have a radar chart which I made in Chart.js.

Normally, the data labels which are displayed around the chart are from a simple array of strings (data.labels). However, I'm in a situation where I need to pass HTML strings into that array, and render those HTML strings into the labels of the chart.

So instead of:

labels: ['Running', 'Swimming', 'Eating', 'Cycling']

I want to be able to do the following:

labels: [ '<b>Running</b>', '<b>Swimming</b>', '<b>Eating</b>', '<b>Cycling</b>' ]

and have the labels show up as Bold Words.

My actual need is not formatting text. What I need is to be able to turn those labels to clickable hyperlinks , and the HTML for that is controlled and supplied by a separate system that formats and returns the HTML, which is in turned included in the code for the chart. When I tested it with the simple HTML shown above, it simply returned the strings as literal HTML strings, instead of rendering Bold Labels.

Is what I'm trying to do possible? Can I in anyway use HTML in chart labels, especially in radar charts?

Thanks everyone.

[Udemology]

To create labels as links you need to watch this video: https://www.youtube.com/watch?v=RKVRqRcDWO0&t=1s&ab_channel=ChartJS

[oajiboye]

Thanks for sharing Udemology. I'll look into this.

[Udemology]

Regarding to making it bold you need the pointLabels: https://www.youtube.com/watch?v=PpDiqdsM37g&ab_channel=ChartJS