ama@copperleaf
Posts: 2
Joined: Mon Sep 18, 2023 8:58 pm

Is it possible to draw interactive path on heat map?

Mon Sep 18, 2023 9:19 pm

I want to create chart using Hi Chart:

- in the background, I want to draw a heatmap
- then I want to overlay horizontal & vertical lines (black dashed lines); their value is based on the map value, and it is interactive so I can adjust it (which changes some threshold that will in turn change how the heatmap is colored)
- I want to also draw few paths diagonally cross the chart (note the diagonal path near when color patches change)
- also I want to switch visualization of the data to linear and logarithmic area chart

Is it possible to realize above functions using Hi Chart? I was able to draw a heatmap, but bit stuck on how to draw the paths - interactive and curved line.
Screenshot 2023-09-18 at 2.15.18 PM.png
Screenshot 2023-09-18 at 2.15.18 PM.png (61.66 KiB) Viewed 73 times
Roughly this is what I want to recreate.

jakub.j
Posts: 884
Joined: Tue Jan 24, 2023 11:14 am

Re: Is it possible to draw interactive path on heat map?

Thu Sep 21, 2023 9:50 am

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

I recreated the chart you asked for. The dashed lines are draggable annotations and the paths that diagonally cross the chart are just simple spline series.

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

Regarding switching the visualization to area chart, please let me know, if you just want to have a button to switch the series type, or you mean something else? Also, please send me a demo of you chart with your exact data structure and than I will be able to help you.

Feel free to ask any further questions!
Best regards
Jakub
Jakub
Highcharts Developer

ama@copperleaf
Posts: 2
Joined: Mon Sep 18, 2023 8:58 pm

Re: Is it possible to draw interactive path on heat map?

Thu Sep 21, 2023 9:45 pm

Wow, I'm amazed at what Hi-chart is capable of. A further question, is it possible to visual the before mentioned chart in linear or logarithmic scale? I thought it is easy, but trying to set yAxis and xAxis with type: 'logarithmic' didn't work.

e.g. logarithmic view:
logarithmic.png
logarithmic.png (36.98 KiB) Viewed 43 times

jakub.j
Posts: 884
Joined: Tue Jan 24, 2023 11:14 am

Re: Is it possible to draw interactive path on heat map?

Fri Sep 22, 2023 12:57 pm

Hey,
I'm glad you like Highcharts!

You can use xAxis.type = 'logarithmic', but you need to set min values of your axes to more than 0, see:
Demo: https://jsfiddle.net/BlackLabel/cz684vya/

If you want to achieve something similar to what you've sent on screenshot, it would be best to use arearange series:
Demo: https://jsfiddle.net/BlackLabel/dfno60px/

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

Return to “Highcharts Usage”