HTML tags enable in Default tooltip labels in chart.js

642 views Asked by At

Need to add HTML tags in default tooltip in label callback function

tooltips: { 
    callbacks: {
        label: function(tooltipItem, data) {
            return "<h1>Daily Ticket Sales</h1> </br> $" + tooltipItem.yLabel;
        },
    }
}
1

There are 1 answers

1
Sanjay Dutt On

What I can see that you want to give some style or to increase the font size of 'Daily Ticket Sales'. One thing that you can do is to put the title in the title callback and change the style for the title through tooltip properties.
[Sample-Code]

options: {
            tooltips: {
                titleFontSize : 24,
                callbacks: {
                    title: function(tooltipItems, data) {
                        return 'Daily Ticket Sales';
                    },
                    label: function(tooltipItem, data) {
                        return '$'+tooltipItem.yLabel;
                    }
                }
            }
        }

Now you see I set the title font size to 24. So that, it will start giving look of h1. Below are the properties that you set for the tooltip title.

titleFontStyle
titleSpacing
titleMarginBottom
titleFontColor
titleAlign