kasia
Posts: 3
Joined: Fri Jul 22, 2022 6:10 am

Plot bands depending on both axis

Hello,

Could you help me, how I can code plot bands like that:

Image

I need them to depend on both axis, so basically I had a plot band on axis Y that had min and max and was one simple rectangle,
but now I need to have different min/max depending on the month.

I wasn't able to find much help in the docs.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Plot bands depending on both axis

Hi Kasia!
Welcome to our forum and thanks for contacting us with your question!

To create a feature, like you requested 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/

Let me know if you have any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”