Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

330
Vistas
How 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:

enter image description here

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!

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda