How to add cursor pointer to Chart.js datalabels plugin

Question

I'm using ChartJs and datalabels plugin.

I would like to add the css "cursor:pointer" when a user is hovering on a datalabel.

How could I do that ?

Answer 1

I had to add this in the datalabels section

It selects the chart when hovering on a specific label and changes the cursor to pointer. It resets when stopping from hovering the label:

  listeners: {
                enter: function(context) {

                  context.hovered = true;
                  var el = document.getElementById("myLineChart");
                  el.style.cursor = "pointer";
                  return true;
                },
                leave: function(context) {
                  context.hovered = false;
                  var el = document.getElementById("myLineChart");
                  el.style.cursor = "default";
                  return true;
                },
              },