[Chartjs]-Disable chartJS tool tip on one dataset only

by

1👍

✅

You can use custom tooltips to do this (basically you use an HTML element instead of using the canvas to render the tooltip alone). See https://github.com/nnnick/Chart.js/blob/v1.0.2/samples/line-customTooltips.html for an example for line charts.

In your case, you can adjust the loop at https://github.com/nnnick/Chart.js/blob/v1.0.2/samples/line-customTooltips.html#L68 to exclude / include the datasets as you see fit.

1👍

I make use of the custom tooltip configuration to achieve this(here it hides datasets that doesn’t have “Income” label):

this.myChart = new Chart(this.ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                    label: "Income",
                    data: data3
                },
                {
                    label: "Tax",
                    data: data1,
                    backgroundColor: "#3EAFD5"
                },
                {
                    label: "Expenses",
                    data: data2,
                    backgroundColor: "#D24B47"
                }
            ]
        },
        options: {
            responsive: true,
            tooltips: {
                custom: function(tooltipModel) {
                    if (tooltipModel.body && tooltipModel.body[0].lines && tooltipModel.body[0].lines[0].indexOf("Income") == -1) {
                        tooltipModel.opacity = 0;
                    }
                }
            }
        }
    }

Leave a comment