CODEWITHSUNDEEP
javascriptjqueryhtmlchart.js
Anup
Anup

Reputation: 9748

Chartjs - Tooltip with Rupee Symbol

I am using tooltip for my chart like this :-

var opt = {
                  ....
                  animation: true,
                  animationSteps: 100,                   
                  tooltipTemplate: function (tooltip) {
                       return numConversion(tooltip.value);
                  }
           }

function numConversion(val) {
    if (val >= 10000000) val = (val / 10000000).toFixed(2) + ' Cr';
    else if (val >= 100000) val = (val / 100000).toFixed(2) + ' Lac';
    else if (val >= 1000) val = (val / 1000).toFixed(2) + ' K';
    return val;

}

I want a Rupee symbol to prepend the text. When i use some html tag to the tooltip, the tag is displayed as it is.

return "<i class='fa fa-inr'></i>" + numConversion(tooltip.value);

The above line displays the tag as it is in text format. How to display the actual tags in the tooltip?

Upvotes: 1

Views: 1213

Answers (2)

potatopeelings
potatopeelings

Reputation: 41075

Using Font Awesome Icons in a Tooltip

Just set the tooltipFontFamily

Note that you are not actually putting HTML in the canvas tooltip. You are just setting the font for the entire tooltip to FontAwesome. The side effect is that your numbers will also be in the FontAwesome font - which is usually ok. If this is not OK, custom tooltips would be the way to go (as @J-D and @Lalji Tadhani already noted)

You'll also have to wait a bit for the font files to load (I believe you'll have this problem even if you do custom tooltips)

Preview

enter image description here

Script

...
var myNewChart = new Chart(ctx).Line(lineData, {
    tooltipFontFamily: "'FontAwesome'",
    tooltipTemplate: function (tooltip) {
        return "\uf156 " + numConversion(tooltip.value);
    }
});
...

CSS

Notice the place holder for the source

@font-face {
    font-family: 'FontAwesome';
    src: /* path to your font files */
    font-weight: normal;
    font-style: normal;
}

Fiddle - https://jsfiddle.net/akypsz26/

Upvotes: 2

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

Add the attribute data-html="true" to your link

HTML-tags in tooltip

Upvotes: 0

Related Questions