highlight the bar category on chart.js when that area is clicked

i have a set a click event that changes some data based on which category the chart is clicked. however, it is not a very good experience for the user and i want to change the background color of that category only to indicate what was tapped by user. my code looks like below

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: [],
}],
labels: this.getNwProgressionLabels(),
},
options: {

onClick: (event, elements, chart) => {

const xScale = chart.scales['x'];
const canvasPosition = getRelativePosition(event, chart);
let xIndex:any = 0
xIndex = xScale.getValueForPixel(canvasPosition.x);
console.log("xIndex:", xIndex)
const age = this.fireProgressionChart.data.labels[xIndex]
console.log("anywhere click age is:", age)
this.updateFireGapData(age)
}
}
})

Continue reading...