Select/deselect in heatmap with checkmark

[vishalpawar048]

Hi Team,

I want to select/deselect the cell in Heatmap by clicking on the cell. The selected cell should have checkmark. (this check mark will be svg element).
https://jsfiddle.net/m9cvfrae/8/.

How can we achieve this?

[jakub.j]

Hello,
Thanks for contacting us vishalpawar048!

The functionality that you wanted can be achieved in two different ways:

#1 by using select / unselect events and plotOptions.series.allowPointSelect
This solution lets you select one point by clicking on it or multiple points by pressing Control, Shift or Cmd and then clicking on the specific point

Demo: https://jsfiddle.net/BlackLabel/qj0dt7nv/
API: https://api.highcharts.com/highcharts/s ... ointSelect
https://api.highcharts.com/highcharts/s ... nts.select


#2 by using click event and point.select
This solution lets you select the points simply by clicking on them

Demo: https://jsfiddle.net/BlackLabel/xjbcmwyp/
API: https://api.highcharts.com/class-refere ... int#select
https://api.highcharts.com/highcharts/s ... ents.click

Let me know if that was what you were looking for!
Best regards

[vishalpawar048]

Thank you so much.
The second solution worked for me.

[vishalpawar048]

Hi, I also want to add some opacity and border to the checked cells. I have managed to add opacity but this opacity is getting applied to the border also. We want the selected cell's borders to be darker (without opacity).
https://jsfiddle.net/a2fvxqnt/8/

[jakub.j]

Hi,

I've made a custom functionality with Highcharts.wrap, now you can set the custom property in series.marker.states.select called backgroundOpacity which allows you to set the opacity only for the background of the tile. Checkout the demo that I prepared for you using it.

Demo: https://jsfiddle.net/BlackLabel/qn13zak2/

​If you have further inquiries, you may reach out to me at any time.

Regards
Jakub

[vishalpawar048]

Hi Jakub,

Thanks for the solution but it seems not working with highchart 9.2.2

https://stackblitz.com/edit/react-npfup8?file=index.js

It works fine with highchart v10.3.3.

I can't update highchart version as all other charts in the project are using 9.2.2 version.

Could you please help with any other solution?

Thanks.

[jakub.j]

Hello again vishalpawar048!

Sorry, we don't support previous versions of Highcharts, I recommend updating your charts to version >10.3.1 in order for this solution to work.

Let me know if you have any further questions!

Kind Regards