Estoy tratando de cambiar el cursor a puntero cuando nos desplazamos sobre el gráfico de barras creado con la biblioteca chartjs (v3). Pero no puedo hacerlo con el siguiente código:
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <div style="width:600px"> <canvas id="myChart"></canvas> </div> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, plugins: [ChartDataLabels], options: { scales: { y: { beginAtZero: true } }, hover: { onHover: function(e) { //$("#canvas1").css("cursor", e[0] ? "pointer" : "default"); var el = document.getElementById("myChart"); el.style.cursor = e[0] ? "pointer" : "default"; } }, legend: { display: false, onHover: function (e) { e.target.style.cursor = 'pointer' }, onLeave: function (e) { e.target.style.cursor = 'default' } }, } }); </script>¿Cómo puedo solucionar este problema?
Algunas cosas están mal, onHover no pertenece a la parte de opciones secundarias de hover , ni siquiera piense que hay una parte de opciones secundarias de desplazamiento. Además, el evento no es una matriz sino un objeto, desea tener el segundo parámetro que contiene todos los elementos activos.
Además, la leyenda debe configurarse en la sección de plugins . Tampoco tiene sentido deshabilitar la leyenda y usar las devoluciones de llamada onHover y onLeave
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <div style="width:600px"> <canvas id="myChart"></canvas> </div> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, plugins: [ChartDataLabels], options: { scales: { y: { beginAtZero: true } }, onHover: function(e, activeEls) { //$("#canvas1").css("cursor", e[0] ? "pointer" : "default"); var el = document.getElementById("myChart"); el.style.cursor = activeEls[0] ? "pointer" : "default"; }, plugins: {legend: { display: false, onHover: function(e) { e.target.style.cursor = 'pointer' }, onLeave: function(e) { e.target.style.cursor = 'default' } },} } }); </script>