[Chartjs]-How to change cursor style to pointer on hovering over points of the chart?

by

12👍

✅

With Chart.js 2.x I use this approach. Just add this in the options:

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

Hope it helps.

1👍

I just did it for a bar chart, but I believe the solution might work for you too.
There’s a property called “chart-hover”, in which you can set a callback. It is triggered every time you enter and leave the chart bar.

This is how my canvas looks like:

<canvas id="bar-material" chart-hover="onHover" class="chart-horizontal-bar"  chart-data="chartData" chart-labels="labels" chart-series="series" chart-colors="colors" chart-options="options" chart-click="onClick" height="160">
</canvas>

This is how onHover looks on my controller:

$scope.onHover = function (points, evt) {
    if (points.length === 0) {
      evt.toElement.attributes.style.nodeValue = evt.toElement.attributes.style.nodeValue.replace("cursor: pointer;", "")
      return;
    }
    var res = evt.toElement.attributes.style.nodeValue.match(/cursor: pointer;/);
    if (res == null) {
      evt.toElement.attributes.style.nodeValue += "cursor: pointer;"
    }
};

0👍

In chart.js v2.9.4, to ensure the hover effect was only there when actually hovering over a data point, I did the following within options:

hover: {
    mode: "nearest",
    onHover: function (e, el) {
        let points = userPricingChart.getElementAtEvent(e);
        if (points.length > 0) {
            e.target.style.cursor = "pointer";
        } else {
            e.target.style.cursor = "default";
        }
    }
}

Hope this helps.

Leave a comment