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

Different line style and/or line width for the high/low lines of a range series

Take the following example:

https://jsfiddle.net/4cpafrsb/

Is it possible to use a different line style and/or line width for the high/low lines of the range series, to make it easier to see which is 'high' and which is 'low'?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Different line style and/or line width for the high/low lines of a range series

Hi!

Thanks for contacting us with your question!

Yes, it is possible. The easiest solution is to add a fake spline series that will cover one of the areasplinerange series' lines, see a demo of this: https://jsfiddle.net/BlackLabel/wqe29u3L/

Another solution is to edit the core code and change the color of the rendered line. Let me know if the first solution is good enough for you - if not, I'll create a demo with another approach.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
drmrbrewer
Posts: 248
Joined: Sat Sep 06, 2014 6:39 pm

Re: Different line style and/or line width for the high/low lines of a range series

Hi, and thanks for the reply!

The problem with that the "fake spline" solution is that it won't work when changing the dashStyle to something else, or making the lineWidth smaller than the original, because the original will no longer be hidden... see the following edit of yours:

https://jsfiddle.net/vpb3wxng/

So maybe overriding some core function will be better?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Different line style and/or line width for the high/low lines of a range series

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
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);
  });
Rafal Sebestjanski,
Highcharts Team Lead
drmrbrewer
Posts: 248
Joined: Sat Sep 06, 2014 6:39 pm

Re: Different line style and/or line width for the high/low lines of a range series

Hmm, it does seem complicated, and a shame that it's not easy to customise the lines separately.

With your solution, it's still not possible to set different styles and line widths... only different colours? Really the main reason for me to do this is to have different line styles, e.g. one with Solid and the other with Dash, so that they look different even in the same colour.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Different line style and/or line width for the high/low lines of a range series

I came up with another idea: how about disabling the line for areasplinerange (lineWidth: 0) and now adding 2 fake series instead of only 1?
Demo: https://jsfiddle.net/BlackLabel/c2kzt7d5/
Rafal Sebestjanski,
Highcharts Team Lead
drmrbrewer
Posts: 248
Joined: Sat Sep 06, 2014 6:39 pm

Re: Different line style and/or line width for the high/low lines of a range series

That should work... I already have several fake/hidden series so I could add to the complicated setup with some more!

I didn't know about the 'keys' setting... that's neat. However, my actual data is not in array form like [x, low, high] but is in object form like { x: __, low: ___, high: ___ }. Does 'keys' apply in this context or is it a case of doing this mapping 'manually'?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Different line style and/or line width for the high/low lines of a range series

Hi,

The keys property can only be used with array data. That's because in contrast to objects, in arrays you don't specifiy a key for each value.

Since Highcharts does not provide such a functionality for object, you would simply have to map through your data to make it work with specific series.
Take a look at the modified demo from previous post below:
https://jsfiddle.net/BlackLabel/j6bkqh5z/

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”