chartjs click event on the bar chart entire category

So i am using chartjs in my ionic angular project and I am able to attached a click event to tap on a specific bar and get the data. in my case I am rendering 3 bars in each category. for a better user experience I want to detect the tap anywhere in the bar and use the x axis value to manipulate things.

Below is the current code:

this.fireProgressionChart = new Chart(this.fireProgressionCanvas.nativeElement, {
data: {
datasets: [{
type: 'bar',
label: 'Expenses',
data: [],
backgroundColor: 'rgb(178, 69, 69)',
}, {
type: 'bar',
label: 'Passive Income',
backgroundColor: 'rgb(12, 133, 75)',
data: [],
},
{
type: 'bar',
label: 'Asset + Passive Income',
backgroundColor: 'rgb(49, 74, 138)',
data: [],
}],
labels: this.getNwProgressionLabels(),
},
options: {
onClick: (event, elements) => {
if (elements.length > 0) {
const age = this.fireProgressionChart.data.labels[elements[0].index]
this.updateFireGapData(age)
}
}
}
})


the event is raised on tapping the bar but I need to be able to raise the event even outside the bars within the chart grid and see which x axis value is there.

Continue reading...