Is it possible to draw interactive path on heat map?

[ama@copperleaf]

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 (61.66 KiB) Viewed 74 times

Roughly this is what I want to recreate.

[jakub.j]

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

[ama@copperleaf]

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 (36.98 KiB) Viewed 44 times

[jakub.j]

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