graefen
Posts: 31
Joined: Wed Aug 21, 2019 7:49 pm

can I customize the heatmap rectangle rendering?

We are working to replace all of our graphs with Highcharts, but I'm needing to find a way to customize how the rectangles are rendered in heatmaps. I did something similar when I needed a tilemap using "perfect" hexagons, so I customized the hexagon tile shape by writing a custom function for `Highcharts.tileShapeTypes.hexagon.translate` Is there something similar I can do for heatmap rendering, to interfere with the rendering so I can customize how the rectangles are drawn?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: can I customize the heatmap rectangle rendering?

Hi,

We appreciate you reaching out to us!

In our documentation, you can find a property that allows you to change markers to a basic shape: https://api.highcharts.com/highcharts/p ... ker.symbol

But, if you want to customize markers even more, you can stick to translate method you mentioned above here:
`H.seriesTypes.heatmap.prototype.translate`

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

Let me know if you have any further questions.

Best regards!
Sebastian Hajdus
Highcharts Developer
graefen
Posts: 31
Joined: Wed Aug 21, 2019 7:49 pm

Re: can I customize the heatmap rectangle rendering?

I look forward to trying it, thank you!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: can I customize the heatmap rectangle rendering?

Feel free to contact us if further needed!

Best Regards
Sebastian Hajdus
Highcharts Developer
akornmeier
Posts: 1
Joined: Wed Jan 26, 2022 3:44 pm

Re: can I customize the heatmap rectangle rendering?

I am also having this same issue in TypeScript. I am trying to customize heatmap cell shapes similar to this example: https://jsfiddle.net/BlackLabel/jv1ek30r

I am seeing the same issue as the OP, in that in TypeScript the `highcharts.seriesTypes` is not an exported type. Can you provide a TypeScript specific example to achieve the same result as in the heatmap example I linked to?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: can I customize the heatmap rectangle rendering?

Hello akornmeier,

Thanks for contacting us with your question!

This is because you are wrapping code that is not available in a public API. You can set the Highcharts object to the type any to avoid getting an error.

Demo: https://codesandbox.io/s/highcharts-typ ... c/index.ts

Or if you want you can extend Highcharts types: https://www.highcharts.com/docs/advance ... typescript

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”