Search code examples
javascripthtmlchart.jstooltip

Chart.js tooltip function


I think my tooltip customization isn't coming into effect because the whole tooltip function doesn't run. So, I tried to console.log a number, should a number not be logged if I hover over the chart?

    let myChart= document.getElementById('myChart').getContext('2d');
    let theChart= new Chart(myChart, {
        type: 'doughnut',
        data: {
            labels: ['January', 'February', 'March'],
            datasets: [{
                label: 'Temperature',
                data: [12, 19, 3],
                backgroundColor: ['rgba(255, 99, 132, 0.2)', "rgba(132, 99, 255, 0.2)", "rgba(255, 132, 99, 0.2)"],
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        },
        options: {
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function (tooltipItem, data) {
                            var label = myChart.data.labels[1.0];
                            console.log("2");
                            return 0;
                        }
                    }
                }
            }
        }
    });
</script>```

Solution

  • Since it'snot working i assume you are using V2 of chart.js in which case you have to configure your tooltip options in the options.tooltips namespace instead of options.plugins.tooltip