Add custom attribute to heatmap cell in dom

[suyashdeshpande]

Is there any way I can add a custom attribute to dom node of the heatmap cell?
For example: I want to add data-age="20" to a heatmap cell

Thanks

[suyashdeshpande]

Image: https://drive.google.com/file/d/19CiY-d ... dcj52/view
I want to add attribute data-age to selected <path> tag

[sebastian.h]

Hi,
Welcome to our forum and thanks for contacting us with your question!

Yes, it's possible to add a new data attribute to graphics elements.

...You can simply achieve the expected effect by a couple of native JS and DOM functions. For example, you can itter on series points, and get all their graphics (SVG elements), then you would be able to set new attributes just like that

Note from this topic describes a working solution.
viewtopic.php?t=40622#p140977

Live demo:
https://jsfiddle.net/BlackLabel/um87bavf/

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

[suyashdeshpande]

Thanks for the quick response.

Earlier I was using highcharts version 6 and now I have upgraded to 9.0.1
It seems earlier heatmaps were using <rect> tag and it was having an id, while now it is using <path> tag and not having id attribute (both have exact same config and data).

I know the above solution can be a workaround, but do you have any views that something bad might have happened in the upgrade?

[sebastian.h]

Hi,
These changes are caused by increasing the security of our library.

Here you will find the GitHub topic, there is another workaround:
https://github.com/highcharts/highchart ... -771668239

As of the next release, more attributes are on allow-listed.
https://github.com/highcharts/highchart ... 02a0f0ee7e

Feel free to ask any questions.
Best regards.

[suyashdeshpande]

Hey,

That seems a good solution. I have 1 more doubt. If we iterate over all the points in a chart and do elem.setAttribute('id', someVariable), won't it affect performance as done in https://jsfiddle.net/BlackLabel/um87bavf/ ?

Thanks

[sebastian.h]

Hi,
I think they shouldn't cause problems with performance.

Live demo:
https://jsfiddle.net/BlackLabel/n70ah9k4/

Best regards.