To increase the font size of label that appears on hover in chart.js

Question

I want increase font size of label that appears on hover in chart.js,I am trying to give custom text to label but am not able to increase it's font.

 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,
                                    }
                                }
                            }
                        })

i tried hover: { mode: 'index', "label": { "fontSize": 20, } } but it didn't work

this is how it looks right now

Answer 1

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>