Chartjs-Adjust appearance of tooltip in lien chart rendered by Chart.js

by

2👍

✅

You can change the configuration for tooltip in options. In tooltip, we have callback object. In which, you set the title to a custom function that returns the title you want to give to the tooltip.
[sample-code]

var chartInstanceHoverModeNearest = new Chart(ctx, {
            type: 'bar',
            data: data,
            options:{
                events:["click"],
                title : {
                    display : true
                },
                scales: {
                    xAxes: [{
                        categorySpacing: 0
                    }]
                },
                tooltips: {
                    enabled: true,
                    callbacks : {
                        title : function(){
                            return "Your Custom Title";
                        },
                        label : function(){
                            return "";
                        }   
                    }
                }
            }
        });

Below are the methods in callback object. If you want to extend more you can override these methods to give custom functionality

callbacks : {
    afterBody:(),
    afterFooter:(),
    afterLabel:(),
    afterTitle:(),
    beforeBody:(),
    beforeFooter:(),
    beforeLabel:(),
    beforeTitle:(),
    footer:(),
    label:(tooltipItem, data),
    labelColor:(tooltipItem, chartInstance),
    title:(tooltipItems, data)
}

Leave a comment