javascript - Como mudar o cursor para um ponteiro quando passo o mouse sobre uma barra em um gráfico de barras do ChartJS?

Aqui está a criação do meu gráfico

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
        }
    });

Este é o HTML, tudo é JavaScript e reside dentro do elemento canvas.

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

Eu fiz com que, quando clico em uma barra, elas ajam como um "drill in" e me levem a uma página com mais detalhes. Para fazer isso, usei este código:

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

Eu gostaria de fazer com que meu cursor mudasse para um ponteiro para informar ao usuário que ele pode clicar na barra (como normalmente mudaria com um link). Eu vi alguns exemplos disso no Stack Overflow, mas eram dos últimos anos, os posts incluíam comentários pedindo uma versão atualizada, mas sem soluções.

Aqui está outro post que vi e que acredito ser a mesma coisa que estou tentando realizar, mas não funcionou para mim.

Como alterar o estilo do cursor para ponteiro ao passar o mouse sobre os pontos do gráfico?

Alguém sabe como posso implementar isso, usando a versão ao vivo mais recente do ChartJS?

Resposta #1

Eu precisava que o cursor mudasse apenas quando estivesse sobre uma barra ou ponto em um gráfico de linhas, então criei esta solução simples. Coloque sua função fora da declaração do gráfico.

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

Resposta #2

há uma propriedade cursor no css que você pode definir. por exemplo :

span.crosshair {
    cursor: crosshair;
}

span.help {
    cursor: help;
}

span.wait {
    cursor: wait;
}

Por favor, consulte este link para mais informações