Me gustaría mostrar el valor en la barra correspondiente al pasar el mouse sobre ella dentro y la etiqueta html. Una vez que pase el cursor sobre el valor, debe mostrarse dentro del elemento html "valueHeader". ¿Alguien puede dar un consejo o una guía sobre cómo lograr esto?
new Chart('myChart', { data: { labels: ['A', 'B', 'C', 'D', 'E'], datasets: [{ label: 'X', type: 'bar', backgroundColor: 'rgb(0, 0, 255)', data: [2, 3, 15, 34, 0], barThickness: 40 } ] }, options: { plugins: { legend: { display: false }, }, scales: { y: { beginAtZero: true }, x: { stacked: true, grid: { display: false } } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script> <p>Today you have worked out for this amount of minutes: </p> <p id="valueHeader"> </p> <canvas id="myChart" height="100"></canvas>Necesita agregar un evento flotante:
options: { onHover: (event, active, chart) => { if (active.length) { let first = active[0]; let setIndex = first.datasetIndex; let index = first.index; let data = chart.data.datasets[setIndex].data[index]; let str = "X: " + data.x + ", Y: " + data.y; let header = document.getElementById("valueHeader"); header.innerHTML = str; } },Aquí hay un JSFiddle si quieres verlo en acción.