How to Disable Everything on Hover in ChartJS?
Last Updated :
26 Aug, 2024
Disabling all hover interactions in Chart.js involves configuring the chart to ignore hover events and disabling tooltips and legends. This makes sure that no visual or interactive elements respond when a user hovers over the chart. By adjusting various options and event handlers, we can turn off hover effects, making the chart static and non-interactive.
Chart.js CDN link
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
These are the following approaches to disable everything on hover:
Disabling Using plugins and hover Options
In this approach, we are using Chart.js plugin options to disable tooltips and legends while also setting the hover mode to null. This configuration prevents any hover interactions and tooltip displays, making the chart static and non-interactive.
Example: The below example disables everything on hover by using plugins and hover options.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Disable everything on Hover</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: green;
text-align: center;
}
h3 {
margin-top: 0;
text-align: center;
}
.chart-container {
position: relative;
width: 300px;
height: 300px;
margin: auto;
}
</style>
</head>
<body>
<h3>Disabling Using plugins and hover Options</h3>
<div class="chart-container">
<canvas id="chart1"></canvas>
</div>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
</script>
<script>
const ctx1 = document.getElementById('chart1').getContext('2d');
const chart1 = new Chart(ctx1, {
type: 'bar',
data: {
labels: ['HTML', 'CSS', 'JavaScript', 'Python'],
datasets: [{
label: 'GeeksforGeeks Tutorials',
data: [30, 50, 70, 40],
backgroundColor: ['red', 'blue', 'green', 'purple']
}]
},
options: {
responsive: true,
plugins: {
tooltip: {
enabled: false
},
legend: {
display: false
}
},
hover: {
mode: null
}
}
});
</script>
</body>
</html>
Output:
OutputDisabling with Custom Handlers
In this approach, we are using custom event handlers and configuration options to disable hover interactions on the chart. By setting tooltip.enabled and legend.display to false, and configuring events to an empty array, we ensure that tooltips and legends do not display. Additionally, we use the onHover event to prevent the cursor from changing, further minimizing hover effects.
Example: The below example disables everything on hover with custom handlers.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Disable everything on hover</title>
<style>
body {
font-family: Arial, sans-serif;
}
h3 {
margin-top: 0;
text-align: center;
}
.chart-container {
position: relative;
width: 300px;
height: 300px;
margin: auto;
}
</style>
</head>
<body>
<h3>Disabling with Custom Handlers</h3>
<div class="chart-container">
<canvas id="chart3"></canvas>
</div>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
</script>
<script>
const ctx3 = document.getElementById('chart3').getContext('2d');
const chart3 = new Chart(ctx3, {
type: 'pie',
data: {
labels: ['React', 'Angular', 'Vue', 'Svelte'],
datasets: [{
label: 'GeeksforGeeks Frameworks',
data: [35, 25, 20, 20],
backgroundColor: ['cyan', 'magenta', 'yellow', 'black']
}]
},
options: {
responsive: true,
plugins: {
tooltip: {
enabled: false
},
legend: {
display: false
}
},
events: [],
onHover: (event) => {
event.native.target.style.cursor = 'default';
},
hover: {
mode: null
}
}
});
</script>
</body>
</html>
Output:
Output
Similar Reads
How to disable a CSS :hover effect? Disabling a CSS :hover effect means preventing the visual changes applied when an element is hovered over by the cursor. This can be done by overriding the :hover styles with none or applying the effect conditionally using JavaScript or specific classes to control when the hover state is active.Here
3 min read
How to Hide/Disable Tooltips Chart.js ? Tooltips provide additional information when hovering over data points, but in some cases, you may want to turn them off for a cleaner and more focused chart presentation. We will discuss how can we Hide/disable the tooltip in Chart.js. CDN link: <script src="https://cdn.jsdelivr.net/npm/chart.js
2 min read
How To Clear Chart from Canvas and Disable Hover Events? When working with Chart.js, a common requirement is to remove a chart from the canvas entirely, including disabling any hover or click events associated with the chart. Simply clearing the canvas visually might not remove the event listeners that Chart.js attaches, which can cause unexpected behavio
4 min read
How to Fix "Bar Chart Showing Old Data when Hovering" in ChartJS? ChartJS is a popular open-source JavaScript library for creating a variety of charts, including lines, bars, pies, and more. It's used for its simplicity, flexibility, and responsiveness. We are going to discuss how can we fix the Chart Showing Old Data when Hovering in ChartJS. Problem ExplanationW
3 min read
How to Hide y Axis Line in ChartJs ? In Chart.JS we can display our information in visual forms. For the customization of the chart, we can remove or hide the Y-axis line from the Chart appearance as per the requirement. We can use two different approaches to hide the y-axis line in the Chart.JS. We will see the practical implementatio
3 min read