¿Cómo puedo hacer que mi elemento de canvas muestre el estilo del cursor como un pointer cuando paso el mouse sobre él?
html :
<canvas id="myChart"></canvas>Probé ambos:
events: ['mousemove', 'click'], onHover: (event, chartElement) => { event.target.style.cursor = chartElement[0] ? 'pointer' : 'default'; }Y:
options: { plugins : { legend: { labels: { onHover: function (e) { e.native.target.style.cursor = 'pointer'; }, onLeave: function (e) { e.native.target.style.cursor = 'default'; } } } } }Pero no tuvo suerte.
Fotos:
Considerándolo todo, quiero que el cursor tenga el mismo estilo que el puntero en todo el gráfico, y no solo en los puntos rojos de la imagen. (El punto rojo con amarillo alrededor es un ejemplo de punto en el que quiero que mi cursor se vea como un puntero).
¡Gracias por adelantado!
En CSS, necesitas canvas:hover{cursor: pointer} . El canvas:hover ejecutará el código interno cuando el cursor se desplace sobre el elemento. El cursor: pointer le indicará al cursor que se convierta en un puntero. Para obtener más información, vaya aquí para otros tipos de cursor y aquí para el selector de desplazamiento.
O si no tiene un archivo CSS, puede hacer esto: <canvas id="myChart" style="cursor: pointer"></canvas> . Eso hará lo mismo que se explicó anteriormente.