[Chartjs]-To increase the font size of label that appears on hover in chart.js

by

3👍

✅

To change the font size of tooltips in Chart.js 3.x, just use options.plugins.tooltip.titleFont.size or options.plugins.tooltip.bodyFont.size.

let ctxP=document.getElementById('mychart').getContext('2d');
let datas={
    value: [10, 15, 20, 25],
    labels: ['A', 'B', 'C', 'D']
};
var myPieChart=new Chart(ctxP, {
    type: 'pie',
    data: {
        labels: datas.labels,
        datasets: [{
            label: 'Dataset 1',
            data: datas.value,
            backgroundColor: datas.colour
        }],
        others: datas.others
    },
    options: {
        hover: {
            mode: 'index'
        },
        legend: {
            display: true,
            position: "right",
            "labels": {
                "fontSize": 20,
            }
        },
        tooltips: {
            // "fontSize": 20, bodyFont: 20,
            callbacks: {
                label: function (tooltipItem, data) {
                    let label=data.labels[tooltipItem.index];
                    let value=data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                    let otherdata=data.others[tooltipItem.index];
                    return ' '+label+': '+value+'%  '+otherdata;
                }
            }
        },
        hover: {
            mode: 'index',
            "label": {
                "fontSize": 20,
            }
        },
        plugins: {
            tooltip: {
                titleFont: {
                    size: 20
                },
                bodyFont: {
                    size: 20
                }
            }
        }
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="mychart"></canvas>

Leave a comment