siralex
Posts: 11
Joined: Sun Nov 12, 2023 6:21 pm

Draw heat map with square and circle around it

Hi,
Is it possible to draw the heat map with a square and circle along with grid on top of the heat map?
I am working on a project that requires to draw wafer map and display the data in grid lines. Also, is it possible to draw custom rectangular shape for the heat map?
I attached a screenshot for your reference. Thank you so much for your help.
https://imgur.com/a/W8J8VDF
Last edited by siralex on Tue Mar 05, 2024 3:56 am, edited 1 time in total.
User avatar
dawid.d
Posts: 827
Joined: Thu Oct 06, 2022 11:31 am

Re: Draw heat map with square and circle around it

Hello,

Thanks for the question!

Yes, basically with SVG Renderer you can draw anything you need. In the demo below you will find a chart created based on your concept.

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

You can find more about the renderer here: https://api.highcharts.com/class-refere ... derer.html

Let me know if this was helpful, and if you need more information, don't hesitate to ask!
Best regards
Dawid Draguła
Highcharts Developer
siralex
Posts: 11
Joined: Sun Nov 12, 2023 6:21 pm

Re: Draw heat map with square and circle around it

Hi dawid.d,
Thank you so much for your help. That is very helpful for me.
IS it possible add a small icon for "X" (close icon) within each of the heatmap's square?
User avatar
dawid.d
Posts: 827
Joined: Thu Oct 06, 2022 11:31 am

Re: Draw heat map with square and circle around it

Hi,

yes, it's possible! There are many possibilities, below in the demo I present one of them, using path elements rendering.

Demo: https://jsfiddle.net/BlackLabel/rx23Lcyf/
Dawid Draguła
Highcharts Developer
siralex
Posts: 11
Joined: Sun Nov 12, 2023 6:21 pm

Re: Draw heat map with square and circle around it

Thank you dawid.d! Really appreciate your help.
siralex
Posts: 11
Joined: Sun Nov 12, 2023 6:21 pm

Re: Draw heat map with square and circle around it

Hi dawid.d
Is this possible to draw the heatmap so that for every 2 cells horizontally we will have a red line and every number (3 in the screenshot) of cells vertically we draw a red horizontal line?
https://imgur.com/a/q1pBVmJ
User avatar
dawid.d
Posts: 827
Joined: Thu Oct 06, 2022 11:31 am

Re: Draw heat map with square and circle around it

Hello again!

You can draw it with axis plotLines or use the renderer: https://jsfiddle.net/BlackLabel/5z6qsmh7/

Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Usage”