[Solved]-Chart.js how to show cursor pointer for labels & legends in line chart-Chart.js

Took me quite some time, but almost none of the other answers work with the latest version of ChartJS (3.7.0 as of now). In the current version, there is a simple way to configure this behavior for all charts:

Chart.defaults.plugins.legend.onHover = function() { 
   document.body.style.cursor = 'pointer'; 
};

Chart.defaults.plugins.legend.onLeave = function() { 
   document.body.style.cursor = 'unset'; 
};

More details can be found in the official documentation: https://www.chartjs.org/docs/latest/configuration/legend.html

As other folks pointed out for others frameworks, in Vue is needed to aim native property. In addition, the target would be the canvas so you need to:

onHover: function (e) {
  e.native.target.style.cursor = "pointer";
},
onLeave: function (e) {
  e.native.target.style.cursor = "default";
},

You can do it with jquery grabbing chart selector which is line-chart.

hover: {
  onHover: function(e, el) {
      $("#line-chart").css("cursor", el[0] ? "pointer" : "default");
    }
  }

jsfiddle

If you are using react-chartjs-2 wrapper for chartjs. This might help you🤓.

In react-chartjs-2 we can make the legends have cursor as 👆pointer using the following configuration for the options prop.

const options = {
    plugins: {
        legends: {
            onHover: (event) => {
                event.native.target.style.cursor = 'pointer'
            }
        }
    }
}

Thanks to @ɢʀᴜɴᴛ and @Fred Lintz, I finally arrived at this on Chart js version 3.5.1:

  onHover: (event, activeElements) => {
    if (activeElements?.length > 0) {
      event.native.target.style.cursor = 'pointer';
    } else {
      event.native.target.style.cursor = 'auto';
    }
  },

Note: There is another option of using document.getElementById('myChart').style.cursor = 'pointer'; which works well, it's just not as clean as I would like it since it sets the cursor for the whole chart, but it will survive if Chart.js changes the API again.

ChartJs 2 provides onHover and onLeave handlers. We can use them to change the cursor:

  legend: {
    display: true,
    onHover: function (e) {
      e.target.style.cursor = 'pointer'
    },
    onLeave: function (e) {
      e.target.style.cursor = 'default'
    }
  }

Expanding on @joshfindit's answer here, for anyone that's looking for a Typescript solution for chart.js v3.5.1:

onHover: (event, activeEvents) => {
   (event?.native?.target as HTMLElement).style.cursor =
        activeEvents?.length > 0 ? 'pointer' : 'auto';
}

• As of Chart js version 3.5.1 the onHover() option looks slightly different and the method to find the points has changed as well.

• 'target' is nested one more level under 'e.native'

• By setting interaction mode to 'index' I'm able to see my combined chart values in the one tooltip on hover.

  options: {
     interaction: { mode: 'index' },
     onHover: function (e) {
       const points = this.getElementsAtEventForMode(
         e,
         'index', { axis: 'x', intersect: true },
         false
       );
  
       if (points.length) e.native.target.style.cursor = 'pointer';
       else e.native.target.style.cursor = 'default';
     }
  }
  

Just add this to the options:

onHover: (event, chartElement) => {
    const target = event.native ? event.native.target : event.target;
    target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}