Sometimes, we want to disable everything on hover with Chart.js.
In this article, we’ll look at how to disable everything on hover with Chart.js.
How to disable everything on hover with Chart.js?
To disable everything on hover with Chart.js, we can set the options.events property to an empty array.
For instance, we write:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id='myChart' style='width: 300px; height: 300px'></canvas>
to add the Chart.js script and canvas.
And we write:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
borderWidth: 1,
borderColor: 'green'
}]
},
options: {
events: []
}
});
to select the canvas and add a line chart into it.
We set options.events to an empty array to disable everything on hover.
Now when we hover over the graph, we shouldn’t see any tooltips or hover effects displayed.
Conclusion
To disable everything on hover with Chart.js, we can set the options.events property to an empty array.
