It seems to be much more complicated than I thought...
I thought those lines are separate SVG elements and it will be easy to change the color of each of them. It turned out it's one graph path and it's not easy to separate it (probably impossible with a current implementation).
See a DOM element:
- areasplinerange-lines.gif (209.61 KiB) Viewed 1470 times
So the required core changes would have to be much more complicated than I initially thought.
Could you reconsider using my first proposed solution? You'll only have to add the same options for both areasplinerange and spline series - I added an event that will take care of this (whenever you set an option for the main series, the fake line series will inherit that option), see demo:
https://jsfiddle.net/BlackLabel/uxy1qhbp/
Code: Select all
Highcharts.addEvent(Highcharts.Chart, 'beforeRender', function() {
const fakeSplineSeries = this.get('fakeSeries'),
options = Highcharts.merge(this.series[0].userOptions, fakeSplineSeries.userOptions);
fakeSplineSeries.update(options, false);
});