vishalpawar048
Posts: 28
Joined: Wed Jan 25, 2023 3:24 am

SVG size in heatmap

Hi,

I am trying to fit svg icon in heatmap. I tried with svg height and width with 12px and it works fine. But if I change the height width to 8px the Icon gets hidden.

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

Could you please help?
vishalpawar048
Posts: 28
Joined: Wed Jan 25, 2023 3:24 am

Re: SVG size in heatmap

I tried to wrap svg into div but still no luck.
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: SVG size in heatmap

Hello,

We appreciate you reaching out to us!

The problem you described happens because path elements go beyond SVG width and height, since SVG's can't automatically scale down (SVG is cropped as a result). Wrapping SVG element in div and setting width and height as inline style seems to resolve this issue.

Take a look at this demo I've created based on your solution: https://stackblitz.com/edit/react-ckmsvj?file=index.js

Let me know if that's what you were looking for! In case of any other questions, feel free to ask.
Best regards!
Jędrzej Ruta
Highcharts Developer
vishalpawar048
Posts: 28
Joined: Wed Jan 25, 2023 3:24 am

Re: SVG size in heatmap

Hi,

Thanks for the reply. But It seems not working. The SVG size has not changed to 8px. Also if you inspect on svg it has a size of 300*150. Which affect click event on multiple cells.
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: SVG size in heatmap

Indeed, SVG seems to overflow it's div wrapper. In order to scale down SVG objects, you can include viewBox attribute in <svg> tag, where width and height parameters should have SVG path dimensions.

Bear in mind that Highcharts uses abstract syntax tree to filter out most HTML tags for security reasons, thus viewBox gets filtered out. You can bypass it by adding viewBox to Highcharts.AST.allowedAttributes.

Take a look at this demo: https://stackblitz.com/edit/react-qn6bac?file=index.js

References:
https://developer.mozilla.org/en-US/doc ... te/viewBox
https://www.highcharts.com/docs/chart-concepts/security

I hope you will find it useful! In case of any other questions, feel free to contact us anytime.
Regards!
Jędrzej Ruta
Highcharts Developer
vishalpawar048
Posts: 28
Joined: Wed Jan 25, 2023 3:24 am

Re: SVG size in heatmap

Thank you so much Jedrzej. It worked.
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: SVG size in heatmap

Glad I could help! If you happen to have any other Highcharts related questions, don't hesitate to contact us again.
Regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Maps”