L.Kim
Posts: 4
Joined: Thu Jun 16, 2022 8:18 am

Area Range Spline Zone Ranges

Hello! I am a new user of Highcharts and had a question regarding zones.

Currently, I am experimenting with an arearangespline graph to show certain ranges, and utilizing zones and CSS filters to visually represent certain thresholds being met. Everything works fine if I want to have these zones apply to the data across the entire graph, but I have run into a problem with splitting the data up into sections along with using zones.

The initial thought was to use zones to show different thresholds, as illustrated in this fiddle: https://jsfiddle.net/9yas0vkt/
The issue here is that I want to show different sections of data with different thresholds.

My current solution has been to split the data into distinct sets of data that would each utilize different zones, but this leaves gaps in between the sets of data.
I have this shown in the fiddle here: https://jsfiddle.net/d4qLt8k2/

A solution to this would be to connect these with more sets of data including just the two points between them. The only issue here is that there does not seem to be a clean way to connect these sets of data if I want the breakpoint of where the data splits in the zone thresholds to be in between the two data points. The fiddle here demonstrates this solution: https://jsfiddle.net/hd2L4bz1/

Is there a better way of going about this? I would really like to have the sections divided in between the sets of data shown in the 2nd fiddle rather than using the 3rd fiddle option of choosing a set of zones to use between the sections.
L.Kim
Posts: 4
Joined: Thu Jun 16, 2022 8:18 am

Re: Area Range Spline Zone Ranges

After writing out this post, I found another solution. I take the averages of the values of the last data point of one set and the first data point of the next set, and create a new data point. I add this new data point to both sets of data.

This works visually, but does add unnecessary data to the graph, as well as a small issue when hovering over the data to access the tooltips (since the data should not actually exist).

Any other suggestions would be greatly appreciated!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Area Range Spline Zone Ranges

Hello,

Welcome to our forum and thank you for contacting us!

Your idea sounds great and I think that you are missing only one part, which is disabling the inactive state on those new series (since from what I understand, you don't want the hover effect on them).
Please take a look at the modified version of your demo below.

DEMO: https://jsfiddle.net/BlackLabel/bye2qv3c/
API Reference: https://api.highcharts.com/highcharts/s ... s.inactive

Let me know if that's what you are looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer
L.Kim
Posts: 4
Joined: Thu Jun 16, 2022 8:18 am

Re: Area Range Spline Zone Ranges

Yes, thank you very much!

I stumbled across that in the API as well and was trying to figure out the best way to apply it to my data. It seems that your suggestion of disabling the inactive state on the new series is what I was looking for, though I think I will need to experiment with it more to see exactly what I want to disable (might be the entire graph).

I realize I didn't add the fiddle with the latest update: https://jsfiddle.net/osf1etwc/2/

Pretty much everything works fine here except July 11, 12:00 PM and July 22, 12:00 PM being hoverable points with values. The reason I added these points is because I wanted the breakpoints in between the timestamps, not at either side.

I'm not sure if there is a way I can avoid having the points be hoverable and create tooltips if I include them in the data for the series. Again, since these are the averages between the timestamps, they're not really supposed to be added data points... but I could not figure another way to have the breakpoints in between the timestamps.

Thank you for your help!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Area Range Spline Zone Ranges

Hello,

I think that you should keep the solution of adding an average value point, to fill in that blank space between zones. It's great!

I have modified your final demo a bit. Right now, the pointBtw1 and pointBtw2 contain an object (instead of an array of arrays). That way, we can add some properties to that specific point, like disabling the tooltip by returning false in events.mouseOver or disabling the markers on hover by marker.states.hover.enabled set to false.

DEMO: https://jsfiddle.net/BlackLabel/6ot2sxpu/

Please take a look at the demo, and tell me if that is a better solution for you,
Best regards!
Kamil Musiałowski
Highcharts Developer
L.Kim
Posts: 4
Joined: Thu Jun 16, 2022 8:18 am

Re: Area Range Spline Zone Ranges

Thank you very much, this is exactly what I was looking for! I actually prefer that there is still a hover over the point without the markers or tooltip, as it shows the breakpoint to the user without giving the unnecessary data at that point.

You were a great help to me!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Area Range Spline Zone Ranges

That is so nice to hear that! I'm really glad that I could help you.

In case of any further questions or issues, you know where to find us
Have a great day!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”