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

With Chart.js 3.x and 4.x:

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

With Chart.js 2.x:

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

• 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';
     }
  }
  

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

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

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'
    }
  }

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.

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'
            }
        }
    }
}

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

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

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

This question is 5 years old and in 2022 using the version 3.x.x of ChartJS this snippet can be a good alternative.

const isArray = a => a instanceof Array
const isNull = a => a == null
const cursor = a => {
  if (isNull(a)) return 'default'
  if (!isArray(a)) return 'pointer'
  if (isArray(a) && a.length > 0) return 'pointer'

  return 'default'
}

const $canvas = document.getElementById('chart')
const onHover = (e, item) => {
  $canvas.style.cursor = cursor(item)
}
const onLeave = () => {
  $canvas.style.cursor = 'default'
}

const lineChart = new Chart($canvas, {
  type: 'line',
  data: {
    labels: ['May', 'June', 'July'],
    datasets: [{
      data: [15, 25, 15],
      label: "My Dataset1",
      borderColor: "#00F",
      fill: false
    }, {
      data: [35, 15, 25],
      label: "My Dataset2",
      borderColor: "#F00",
      fill: false
    }]
  },
  options: {
    responsive: true,
    onHover,
    plugins: {
      legend: {
        onHover,
        onLeave,
      },
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="chart" width="600" height="180"></canvas>