Chart.js: How to highlight bar at stacked bar chart on click

[WalkOffEarth]

hi

its not an issue but implementation question i looked lots in google but didn't find solution,

how can i change colour or highlight something like happen on hover of bar on click, means when i click to particular label dataset bar it should highlighted or change colour for bar.

in previous version docs i saw there is method getBarAtEvent() which give me bar and we can do with that in latest version i didn't see that method.

please let me know how can i achieve this.

Thanks

[etimberg]

@WalkOffEarth to get the item at the event, see http://www.chartjs.org/docs/latest/developers/api.html#getelementatevente

I would use that to see which bar is clicked, then change the chart and call update() to trigger another render

[WalkOffEarth]

thank you @etimberg for your response
exactly i am doing like this

this.getElementAtEvent(event)[0]._chart.config.data.datasets[0].backgroundColor="#000"

but it change the entire dataset colour and it should be :)

but i want to achieve some thing like if click label "A" bar dataset "0" bar, only that bar colour should change...

How can i achieve this....

Please guide me....

[etimberg]

@WalkOffEarth you could set config.data.datasets[0].backgroundColor as an array of colours.

alternatively you can do

var element = this.getElementAtEvent(event)[0];
element.custom = element.custom || {};
element.custom.backgroundColor = '#000';

You could need to keep track of the previous index so that you can clear the custom property of the old bar first

[WalkOffEarth]

thank you @etimberg

it solved my problem you rock 👍 thank you once again :)

[kukijack]

@etimberg please help how to clear the custom property of the old data point.
Does delete the custom obj works?
Does it require chart.update() after deletion?
Thanks for the help in advance.