Chartjs-ChartJS Tooltip Customization

by

1👍

✅

Just change your options parameter a little bit.

tooltips: {
            mode: 'index',
            intersect: false,
            callbacks: {
                //returns a empty string if the label is "No Data"
                label: function(items, data){
                    let dataset = data.datasets[items.datasetIndex];
                    if(dataset.label !== "No Data") {
                        return `${dataset.label}: ${items.yLabel}`
                    } else {
                        return ""
                    }
                },

                //only returns something when at least one dataset yLabel is a valid number.
                title: function(t, e) {
                    let shouldDisplay = false;
                    t.forEach((it) => {
                       if(!isNaN(it.yLabel)) shouldDisplay = true;
                    });
                    if(shouldDisplay) {
                        return t[0].xLabel;
                    }
                }
            }
        },

There is probably a better way to optimize this, but I hope it helps

Leave a comment