drmrbrewer
Posts: 248
Joined: Sat Sep 06, 2014 6:39 pm

areasplinerange fill color that differentiates direction

A while ago I posted the following question:

https://stackoverflow.com/questions/41292433/

I got an answer on this forum here:

viewtopic.php?f=9&t=37255&p=130830#p130841

Are there any new features added in the last couple of years that would make this any easier? It's very tricky to have to calculate crossing points of a spline... I appreciate that if I don't do it then highcharts would have to... but it would be a really neat feature to have!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: areasplinerange fill color that differentiates direction

Hi, drmrbrewer!

We haven't got any feature like this built-in yet, but I can suggest you a custom, more automated solution. Unfortunately, this mathematical concept works only for straight lines, so if you want to use it, you will have to change the type of your chart from areasplinerange to arearange.

This is an example of how to find the coordinates of intersection of the lines: https://jsfiddle.net/BlackLabel/wfL968hg/

You can read about the mechanism of the main function here: https://en.wikipedia.org/wiki/Line%E2%8 ... tersection

Of course, you can additionally add a function that will loop through the whole series and look for points where your lines change to below/above automatically. I just rigidly used 6th and 7th points.

Best regards!

edit: Here you can take a look at automated calculating ;)
jsFiddle: https://jsfiddle.net/BlackLabel/0qzsm83j/
Rafal Sebestjanski,
Highcharts Team Lead
drmrbrewer
Posts: 248
Joined: Sat Sep 06, 2014 6:39 pm

Re: areasplinerange fill color that differentiates direction

Thanks, that's really helpful. It's a shame it's not possible with spline, but I guess the calculations are even trickier!

Return to “Highcharts Usage”