Chart.js bar chart mouse hovering highlights all the datasets instead of just the selected one

Question

I have a very simple (horizontal) bar chart using Chart.js latest version.

It has 3 datasets, Foo, Bar & Baz. The problem is that when I hover with the mouse over a bar (dataset), all 3 of them get highlighted instead of just the one that mouse is over at.

Current behavior:

Expected behavior:

I have tried playing with the tooltip settings, but couldn't quite figure it out. So any idea on how can I achieve this?

Here is my current Chart configuration, also on Codepen:

const ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ['Test'],
        datasets: [
            {
                label: 'Foo',
                data: [1],
                backgroundColor: 'rgba(23, 83, 139, 0.5)',
                borderColor: '#17538b',
                borderWidth: 2,
                hoverBackgroundColor: "#17538b",
                hoverBorderColor: "#4444442b",
            },
            {
                label: 'Bar',
                data: [2],
                backgroundColor: 'rgba(255, 85, 33, 0.5)',
                borderColor: '#ff5521',
                borderWidth: 2,
                hoverBackgroundColor: "#ff5521",
                hoverBorderColor: "#4444442b",
            },
            {
                label: 'Baz',
                data: [3],
                backgroundColor: 'rgba(62, 211, 241, 0.5)',
                borderColor: '#3ed3f1',
                borderWidth: 2,
                hoverBackgroundColor: "#3ed3f1",
                hoverBorderColor: "#4444442b",
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            position: 'bottom',
        },
        tooltips: {
            mode: 'dataset',
            intersect: true
        },
        scales: {
            xAxes: [
                {
                    display: true,
                    ticks: {
                        beginAtZero: true,
                    },
                },
            ],
            yAxes: [{
                display: false,
                ticks: {
                    beginAtZero: true,
                },
            }],
        }

    },
});

Any help is kindly appreciated.

Solved this myself: Apparently there is a a global option for hover modes:

options: {
        hover: {
           mode: 'dataset',
        }
}

user_11345852 · Answer

If anyone wonders as me, how this could be done for chart of type: 'line', just add these options:

options: {
    elements: {
        point: {
            hitRadius: 1,
        }
    },
    tooltips: {
        mode: 'single',
    },
    hover: {
        mode: 'dataset',
        intersect: false
    }
}

and also don´t forget to add colors for highlighting (for each dataset obviously):

datasets: [
    {
        label: "A",
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 3,
        borderColor: '#ec5e5f',
        hoverBorderColor: '#e41a1c',
        pointHoverBackgroundColor: "#fff",
        lineTension: 0.5,
    }
]

For full example check out this codepen

Chart.js bar chart mouse hovering highlights all the datasets instead of just the selected one

1 Answers