How to change the cursor to a pointer when I hover over a bar in a ChartJS bar chart?

Question

Here is my chart creation

createChart = function (name, contributions, idArray) {
    globalIdArray = idArray;
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: "bar",
        data: {
            labels: name,
            datasets: [{
                label: "Contributions",
                data: contributions,
                backgroundColor: [
                    'rgba(0, 255, 0, 0.2)',
                    'rgba(0, 255, 0, 0.2)',
                    'rgba(0, 255, 0, 0.2)',
                    'rgba(0, 255, 0, 0.2)',
                    'rgba(0, 255, 0, 0.2)'
                ]
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            onClick: handleClick,
            onHover: handleHover
        }
    });

This is the HTML, everything is JavaScript and resides inside the canvas element.

<canvas chart-hover="onHover" id="myChart" width="200" height="200"></canvas>

I made it so when I click on a bar they act as a "drill in" and take my a page with more details. To do that I used this code:

function handleClick(e) {
            debugger;
            var activeElement = myChart.getElementAtEvent(e);
            var designerId = _idArray[activeElement[0]._index];
            window.location.href = "/Display/search/index?designerId=" + designerId;
        }

I'd like to make it so my cursor changes to a pointer to let the user know they can click the bar (as it would normally change with a link). I saw some examples of this on Stack Overflow but they were from the last year or two, the posts included comments asking for an updated version but no solutions.

Here is another post I saw which I believe is the same thing I am trying to accomplish but it didn't work for me.

How to change cursor style to pointer on hovering over points of the chart?

Does anyone know of how I can implement this, using the most recent live version of ChartJS?

Marketplace

Answer 1

I needed the cursor to change only when over a bar or point on a line chart so came up with this simple solution. Place your function outside the chart declaration.

var chart = new Chart(ctx, {
    data: {...},
    options: {
     onHover: graphHover
    }
});
function graphHover(e, array) {
    if(array.length > 0) {
        e.target.style.cursor = 'pointer';
    }else {
        e.target.style.cursor = '';
    }
}

Kaja

Short and sweet You can pass the arrow function as well there. – Potentilla

Answer 2

there is a cursor property in css that you can set. for example :

span.crosshair {
    cursor: crosshair;
}

span.help {
    cursor: help;
}

span.wait {
    cursor: wait;
}

Please refer to this link for more information

Bounden

Since the whole chart is inside of a <canvas> element wouldn't this change the cursor no matter where on the graph they have it? I'm interested in having it change only when they are hovering over a bar. – Marketplace

Maybe you can set a custom class in the parameters, If not, inspect the element and check if there's a class on the bar, you can then set the cursor in your custom css – Bounden

I tried inspecting the bar and it just takes me to the canvas element. Here is that other post I am referencing: #41014778 Is this regular javascript or is he using angular? I ask because of the $scope.onHover – Marketplace

@Rfjt if there is a $scope variable, it is most likely angular js variable. You should check chart.js documentation to check if there is a way to customize band, i'm pretty sure there is. – Bounden

Thanks for clearing that up for me. What do you mean by 'band'? – Marketplace

@Rfjt the thing in the chart, the rows. i don't know how you says it haha – Bounden

Answer 3

To change the cursor to a pointer when hovering over items in a Chart.js chart, you can use the onHover option like this:

const ctx = document.getElementById('myChart');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['First', 'Second', 'Third'],
        datasets: [{
            label: 'Sales',
            data: [10, 20, 30],
            borderWidth: 1
        }]
    },
    options: {
        onHover: (event, chartElement) => {
            if (chartElement.length) {
                event.native.target.style.cursor = 'pointer';
            } else {
                event.native.target.style.cursor = 'default';
            }
        }
    }
});

Campbellite