0
328
ViewsHow to make the whole <canvas> element in Chart.js V3.7.0 display cursor as pointer on hover?
how can I make my canvas element display cursor style as pointer when I hover over it.
HTML:
<canvas id="myChart"></canvas>
I tried both:
events: ['mousemove', 'click'],
onHover: (event, chartElement) => {
event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}
And:
options: {
plugins : {
legend: {
labels: {
onHover: function (e) {
e.native.target.style.cursor = 'pointer';
},
onLeave: function (e) {
e.native.target.style.cursor = 'default';
}
}
}
}
}
But had no luck.
Pictures:
All in all, I want the cursor to have style equal to pointer on whole chart, and not just on the red points in the picture. (Red point with Yellow arround it, is an example of point I want my cursor to look like a pointer.).
Thanks in advance!
1 answers
Answer question0
In CSS, you need canvas:hover{cursor: pointer}. The canvas:hover will run the code inside when the cursor is hovering over the element. The cursor: pointer will tell the cursor to become a pointer. For more information, go here for other cursor types and here for hover selector.
Or if you don't have a CSS file, you can do this: <canvas id="myChart" style="cursor: pointer"></canvas> . That will do the same thing as explained above.