Custom tooltip callback on one dataset (chartjs v 2.5)

Question

I have a doughnut chart with 2 datasets with a custom tooltip callback. I'm trying to hide the tooltip for one of the datasets. I have it all working, but I get a bunch of js errors when I hover the second dataset. Here is my code:

    const data = {
        labels: ' . $custom_label . ',
        datasets: [
            {
                data: ' . $vdata . ', 
                backgroundColor: [ "#f56954", "#00a65a", "#f39c12", "#00c0ef", "#3c8dbc" ], 
                hoverOffset: 4
            },
            {
                data: ' . $cdata . ', 
                backgroundColor: [ "#fff", "#fff", "#fff", "#fff", "#fff" ], 
                hoverBackgroundColor: [ "#fff", "#fff", "#fff", "#fff", "#fff" ], 
                hoverBorderColor: [ "#fff", "#fff", "#fff", "#fff", "#fff" ],
            }
        ] 
    };
    const config = {
        type: "doughnut",
        data: data,
        options: {
            cutoutPercentage: 40,
            legend: {
                display: false
            },
            tooltips: { 
                filter: function (tooltipItem) {
                   return tooltipItem.datasetIndex === 0;
                },
                callbacks: {
                    title: function(tooltipItem, data) {
                            var dataset = data["datasets"][0];
                            var percent = Math.round((dataset["data"][tooltipItem[0]["index"]] / dataset["_meta"][0]["total"]) * 100)
                            return data["labels"][tooltipItem[0]["index"]] + " " + percent + "%";
                    },
                    label: function(tooltipItem, data) {
                            var dataset = data["datasets"][0];
                            var value = dataset["data"][tooltipItem["index"]];
                            return "$" + (Math.round(value * 100) / 100).toFixed(2);
                    },
                    afterLabel: function(tooltipItem, data) {
                            var dataset = data["datasets"][1];
                            return dataset["data"][tooltipItem["index"]] + " " + data["labels"][tooltipItem["index"]];
                    }
                },
                titleFontColor: "#fff",
                titleFontSize: 14,
                backgroundColor: "#000",
                bodyFontColor: "#fff",
                bodyFontSize: 14,
                bodySpacing: 4,
                displayColors: false
            }
        }
    };
    var assetsChart = new Chart( document.getElementById("assetsChart"), config );

I'm assuming it's getting an error trying to read the ["index"] portion since it doesn't exist for the second dataset.

EDIT: I updated to show the full code for my chart

How do I resolve this?

Answer 1

You use a really old version of Chart.js . You should first switch to the latest version (currently v3.5.1 ).

Please take a look at your amended and runnable code below and see how it could work using Chart.js v3.5.1 .

 new Chart('chart', { type: 'doughnut', data: { labels: ['One', 'Two', 'Three', 'Four', 'Five'], datasets: [{ data: [5, 3, 7, 6, 7], backgroundColor: ["#f56954", "#00a65a", "#f39c12", "#00c0ef", "#3c8dbc"], hoverOffset: 4, }, { data: [2, 4, 5, 4, 6], hidden: true } ] }, options: { plugins: { tooltip: { filter: ctx => ctx.datasetIndex == 0, callbacks: { title: ctx => { if (ctx.length) { var data = ctx[0].dataset.data; var value = data[ctx[0].dataIndex]; var total = data.reduce((a, b) => a + b, 0); var percent = Math.round(value / total * 100); return value + " " + percent + "%"; } }, label: ctx => { var value = ctx.dataset.data[ctx.dataIndex]; return "$" + (Math.round(value * 100) / 100).toFixed(2); }, afterLabel: ctx => { var hiddenDataset = ctx.chart.config._config.data.datasets[1].data; var value = hiddenDataset[ctx.dataIndex]; return value + " " + ctx.label; } }, titleColor: "#fff", titleFontSize: 14, backgroundColor: "#000", bodyFontColor: "#fff", bodyFontSize: 14, bodySpacing: 4, displayColors: false } } } });

 canvas { max-height: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script> <canvas id="chart"></canvas>