darsh@Yoko
Posts: 4
Joined: Fri Jul 24, 2020 8:18 am

How to limit the width of Y-Axis Plotband

Hi there,

I've been exploring HighStock for sometime and we have a scenario, where we need to limit the Y-axis plotband. By default, if we give the from and to value to the plotband it will occupy the entire x-axis length. So we are designing a chart in such a way, the user should be able to see the future time and the band should end at the current time. Suppose my X-axis is having a date-time range of 12:PM, 2:PM, 4:PM and future time 6:PM and I want to add a plotband on the y-axis in a way that it has to start at 12:PM and end at 4:PM since 4:PM is the current time. Any help would be really appreciated since I've been looking for a solution from a long time.

Thanks,
Darshan
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: How to limit the width of Y-Axis Plotband

Hello, Thanks for contacting us with your question. As you said, the plotLines and plotBands are created in such a way, to be plotted on whole chart width/ height. They are created as a part of axis, which have no reference to opposite axis. You can solve your issue in 2 ways:

1. Custom plugin:
You can create plugin to extend the highcharts. Here is the example :https://jsfiddle.net/BlackLabel/2gryudv5/
and here is the article about extending highcharts: https://www.highcharts.com/docs/extendi ... highcharts
In this example there is no multi Axis handling implemented.

2. SVG Renderer
You can create the plotBand on your own using the svg renderer class. It allows to create custom shapes with given positions.

Please, let me know, if this was what you were looking for. In case of any further questions feel free to ask!
Kind regards,
Paweł Lysy
Highcharts Developer
darsh@Yoko
Posts: 4
Joined: Fri Jul 24, 2020 8:18 am

Re: How to limit the width of Y-Axis Plotband

pawelys wrote: Wed Nov 04, 2020 2:10 pm Hello, Thanks for contacting us with your question. As you said, the plotLines and plotBands are created in such a way, to be plotted on whole chart width/ height. They are created as a part of axis, which have no reference to opposite axis. You can solve your issue in 2 ways:

1. Custom plugin:
You can create plugin to extend the highcharts. Here is the example :https://jsfiddle.net/BlackLabel/2gryudv5/
and here is the article about extending highcharts: https://www.highcharts.com/docs/extendi ... highcharts
In this example there is no multi Axis handling implemented.

2. SVG Renderer
You can create the plotBand on your own using the svg renderer class. It allows to create custom shapes with given positions.

Please, let me know, if this was what you were looking for. In case of any further questions feel free to ask!
Kind regards,
Thanks a lot @Pawelys. Your solution really helped me in solving the problem.
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: How to limit the width of Y-Axis Plotband

You're welcome!
In case of any further questions feel free to ask!
Kind regards,
Paweł Lysy
Highcharts Developer
krishnaAgra
Posts: 2
Joined: Tue Nov 09, 2021 12:07 pm

Re: How to limit the width of Y-Axis Plotband

Hi Team,
I was also looking for this solution. Thanks for your answer.
But I am facing another issue , as I am using tree structure on y axis and once charts renders, plotband looks good but when i collapse topmost node/tree, plotband does not disappear but still hang on there on another axis. I want to see plotband against its relative axis only.

Thanks in advance.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to limit the width of Y-Axis Plotband

Hello krishnaAgra,

Please provide me with reproduction of you chart and issue. You can start here: https://jsfiddle.net/BlackLabel/Lcf36abd/

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”