jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

area range chart with steps

i have requirement to draw chart which highlight the are between the step line chart..

in below screenshot i do have two solid lines with steps: true.. but how can i highlight the area between solid yellow lines..
i tried using arearange but that would not draw step chart..

Thanks
Sheetal
Attachments
sample_chart.png
sample_chart.png (78.63 KiB) Viewed 360 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: area range chart with steps

Hi Sheetal!
Thanks for contacting us with your question!

The idea, which is coming to my mind after seeing and reading your requirement is to use a customized plotBands. To do this you have to modify a little bit one of the core functions in Highcharts, which is responsible for drawing plot bands. If you want to use it in your project all you need to do is copy/paste the plugin in the IIFE function. I have extended this function to accept two new properties passed from the plot band object: start and end, which are responsible for start X-value where the plot band should start and end X-value plot should be ended:

Code: Select all

{
	color: '#FCFFC5',
	from: 5,
	to: 10,
	start: 0,
	end: 4
}

Please, check the demo below to see an example.
Demo: https://jsfiddle.net/BlackLabel/8xze4dcf/
Demo: https://jsfiddle.net/BlackLabel/tj1rf8hd/

Let me know if you have any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: area range chart with steps

wow.. Thanks a lot for help.. this would definitely work for us...
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: area range chart with steps

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”