Here's the chart I created:
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 HTML is actually all JavaScript code that exists inside a canvas element.
<canvas chart-hover="onHover" id="myChart" width="200" height="200"></canvas>
When I click on a bar in the chart, it acts as a "drill in" and takes me to a page with more details. Here's the code for that functionality:
function handleClick(e) {
debugger;
var activeElement = myChart.getElementAtEvent(e);
var designerId = _idArray[activeElement[0]._index];
window.location.href = "/Display/search/index?designerId=" + designerId;
}
I want the cursor to change to a pointer when hovering over the bar, indicating that it can be clicked. I found some examples on Stack Overflow, but they were outdated. I also tried another solution from a post which didn't work for me.
How to change cursor style to pointer on hovering over points of the chart?
Does anyone know how I can achieve this using the latest version of ChartJS?