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

by

5👍

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

1👍

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

Leave a comment