Within my Laravel 5.7 application, I am utilizing Chart.js version 2.7.2 for a Stacked Line chart feature that opens a modal dialog when a user clicks on points within the report.
var lineCanvas = document.getElementById("canvasVotesByDays");
var lineCanvasContext = lineCanvas.getContext('2d');
$("#div_canvasVotesByDays").css("display", "block")
var numberWithCommas = function (x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
var self = this;
if (window.chartLineObject != undefined) { // clear existing instance
window.chartLineObject.destroy();
}
window.chartLineObject = new Chart(lineCanvasContext, {
type: 'line',
data: {
labels: monthsXCoordItems,
datasets: [
{
label: 'Correct Votes',
data: voteValuesCorrect,
borderWidth: 1, // The stroke width of the line in pixels.
},
{
label: 'Incorrect Votes',
data: voteValuesNoneCorrect,
borderWidth: 1, // The stroke width of the line in pixels.
}
]
},
options: { // options of Report By Vote Days ( 'line' report )
animation: {
duration: 10,
},
tooltips: { // tooltip text of Report By Vote Days ( 'line' report )
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
}
}
}, // tooltips: { // tooltip text of Report By Vote Days ( 'line' report )
scales: { // options for x and y scales of 'line' report
xAxes: [{
stacked: true, // Stacked line charts can be used to show how one data series i
gridLines: {display: true},
}],
yAxes: [{
stacked: true, // Stacked line charts can be used to show how one data series i
ticks: {
callback: function (value) { // on Y scale show only integer without decimals
if (Math.floor(value) === value) {
return value;
} // return numberWithCommas(value);
},
},
}],
}, // scales: { // options for x and y scales of 'line' report
legend: {display: true}
} // options: { // options of Report By Vote Days ( 'line' report )
}); // window.chartLineObject = new Chart(lineCanvasContext, {
lineCanvas.onclick = function (e) {
var firstPoint = window.chartLineObject.getElementsAtEvent(e);
if (typeof firstPoint[0] == "undefined") {
popupAlert("Select one of visible dots to get detailed results !", 'danger')
return;
}
if (firstPoint) {
var first_point_index = firstPoint[0]._index
if (typeof window.chartLineObject.data.labels[first_point_index] == "undefined") {
popupAlert("Bad point !", 'danger')
return;
}
var selected_day = window.chartLineObject.data.labels[first_point_index];
backendReports.showVoteNamesReportDetailsByDays(selected_day)
return;
}
} // window.chartLineObject.onclick = function(e) {
The main purpose of this functionality is to trigger a dialog model specifically when the user interacts with visible points on the report. While the functionality operates correctly, an issue arises when attempting to click on the legend block situated at the top of the report (which also functions as a filter), resulting in an error message:
https://i.sstatic.net/VZBAh.jpgIs there a way to differentiate between clicking on the legend label versus other areas?
You can interact live with this feature at
Thank you!