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

by

1👍

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

Leave a comment