Utilizing the Vue ChartJS, I have successfully generated a Line Chart.
My Objective:
I want to redirect the user whenever they click on a data point.
Here is a screenshot for referencehttps://i.sstatic.net/06kWB.png
For instance, clicking on the first data point should redirect the user to invoices/month_of_the_pointer.
The Code:
chart_data: {
labels: ['January', 'February', 'March', 'April'],
datasets: [
// GENERATED DYNAMICALLY FROM A FUNCTION
],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(label, index, labels) {
return env.EGP_CURRENCY + label;
},
},
gridLines: {
display: true
},
}],
xAxes: [ {
gridLines: {
display: false
}
}]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
},
Approaches Taken:
I attempted to include an onClick callback, which does register the click event but triggers it for all areas of the chart rather than just the data points.
onClick: function(evt) {
console.log(evt);
},