Chartjs-Chartjs: display value in html element when hovering a bar

by

1👍

✅

You need to add a hover event:

  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;
            }
      },

Here is a JSFiddle if you want to see it in action.

Leave a comment