Chart.js: Use HTML for labels

[fellars]

In inspecting the code, it appears you are using fillText function on the canvas for the labels, so HTML is not going to be easy to use for the axis labels. I need to be able to use an icon instead of text for the label, (i.e. using bootstrap: <i class="icon icon-twitter"></i> )

Any idea if even remotely possibly?

[nnnick]

If you're using an icon font you _should_ be able to set the font family to the icon font, then use a unicode character to render your specific icon.

For example, here I've set to the unicode code for the copyright symbol - "\u00A9" as one of my labels for this bar chart:

[fellars]

ok, that is helpful. I'm using FontAwesome, which has unicode available, but not sure which option to set the FontFamily on. I've tried pointLabelFontFamily : "'FontAwesome'" and scaleFontFamily: "'FontAwesome'" but neither seems to work. Unicode values are here : http://fortawesome.github.io/Font-Awesome/cheatsheet/

[nnnick]

What value exactly are you using? The fontawesome site shows the unicode values as HTML entities.

For example, the first icon, fa-adjust, has an HTML entity of , which you'd need to use as "\f042" as the value for your label when using with js.

[fellars]

Here is a jsfiddle of what I’ve got. It just comes through as 042. Thanks for taking a look Nick.

http://jsfiddle.net/JWp7W/3/

[fellars]

I got it working. For anyone else looking for solution, here it is:
http://jsfiddle.net/JWp7W/5/

Thanks Nick. I can now replace highcharts :)

[nnnick]

Nice effect! - Don't forget to update your titles in the tooltips too - http://jsfiddle.net/r83GA/

[saad024]

is that possible to add img tag?

[soniaCejas]

It's posibble use HTML for labels in the new version 2.1.4??
I need use "fontello".
I have to do something like this:
return "<i class='icon-ok-circled2'></i>" + chart.data.labels[tooltipItem[0].index];

Thanks