Chart with 2 series, one xAxis and 2 yAxis stacked

[JaagerBomb]

Hi,

I am currently using highcharts v6.1.4 and i wanted to know if there is a way to create a chart with at least two series, one datetime xAxis that is shared between series, and at least two yAxis.
So this is the easy part, i already know how to do it, what i would like to have is the two yAxis stacked on the same side. I would like to create a chart with one serie which is an xrange at the bottom of the chart (with his own yAxis and the same xAxis than the other series) and above the other series with their own yAxis and the same xAxis.

Stacked chart

StackedChart.png (13.34 KiB) Viewed 4217 times

This picture is exactly what i would like to do. The category of the xrange will be hidden in any case.

I didn't find anywhere an example on how this could be achieve.

Is there a way to do it ? If you need more info don't hesitate to ask them !

Thanks a lot !

[rafalS]

Hi, JaagerBomb!

Could you prepare a simplified jsFiddle demo I could work on? The only thing I can't understand for this moment is the purpose of the xrange series and how yAxis connected to this series should look like.

Best regards!

[JaagerBomb]

Hi rafal S !

Yes, this could be a base of what i want https://jsfiddle.net/L62r9j31/

The purpose of the xRange is to show the period of activation of the selected object from where we retrieved the data we are displaying in column, for example if we monitor sellings of a given rule on a given period, i want to be able to know when this rule has been activated during the selected period to know if there is some months where i didn't sold anything (while it was still activated)...

Does it help you ? If not i can try to give you a concrete scenario with more details.

Regards !

[JaagerBomb]

Hi again,
So i'm close of what i want but to do it i had to use two different graph instead of one so it is not the best way i would like to it...

TwoGraphStacked.png (5.9 KiB) Viewed 4184 times

If there is a solution to do it in only one graph it could be better butfor the moment...

[rafalS]

Hi, JaagerBomb!

I am still not sure if this is what you've been trying to achieve, but can you take a look and tell me if I am heading in the right direction?

1. approach: I was able to move our xrange series under the x-axis
2. approach: maybe instead of using xrange series you will use Highcharts SVG Renderer? We can render a green rectangle that will start and end with the given points. For this moment it's rigidly positioned, but it can be automated and more flexible.

Take a look at these 2 approaches and let me know if this is what you wanted. If it's not, please give me some more details.

jsFiddle: https://jsfiddle.net/rf6asxkp/

Hope your weekend was great!
Rafal

[JaagerBomb]

Hi rafalS !

Thanks a lot! This is exactly it ! This is the solution without the rectangle !

I don't know why i didn't try to put a min: -1 to my yAxis so it create a natural offset and then i just have to put my xRange y in negative...
Thanks a looooot, you have been perfect !

Rainy week end for me so i hope yours was better !!

JaagerBomb

[rafalS]

You're welcome my weekend was fine.
Best regards!

[JaagerBomb]

Hi again,

Sorry to repost something here (by the way i don't know if i should open a new thread or not...) but i was doing some test with your proposal and i don't know why, there is a weird behavior when there is at least 3 items in the xrange data serie...

Look here : https://jsfiddle.net/jo7y9cL8/

If you comment the third item in the xrange data serie you will see that column will become bigger, and there is a different margin on left and right side of the xAxis, why ? I don't understand why it starts doing that when there is 3 items, but if there is less there is no issue...

Best regards,

JaagerBomb

[rafalS]

Hi JaagerBomb,

The problem is that when we have more xrange points, they affect on x-axis and change column's paddings, ranges and other options. The simplest solution is to connect xrange series to another x-axis (separate it from the column series) as we did it with y-axes

So, in short, I created another x-axis (the same as the previous one) and connected xrange series to it.

jsFiddle: https://jsfiddle.net/BlackLabel/vef8b3ot/

Best regards!

[JaagerBomb]

Hi rafalS,

Thanks for the solution it should work exactly as intended !
But why it affects this way the xAxis and the column padding ? I don't understand why it happens when there is at least 3 xrange points, and not 2 for example...

Thanks again for the solution, should be correct now !

Best regards !

[rafalS]

JaagerBomb,

I didn't look at it close enough yesterday and I wasn't completely sure and specific (however my workaround was still good ). The problem really lies in pointRange. It's computing based on the distance between the two closest data points. You added a 3rd point and it affected on pointRange, that's why all column points were displayed differently. When we add a 3rd point with bigger distance, you can see that nothing changes: https://jsfiddle.net/BlackLabel/c4vxntuo/

The conclusion is that we don't have to create a second fake x-axis - it's enough to set pointRange property to 2592000000 (1 month):

Code: Select all

plotOptions: {
  	series: {
    	pointRange: 1000 * 60 * 60 * 24 * 30 // 1 month
    }
  },

https://jsfiddle.net/BlackLabel/vbs8ght3/

https://api.highcharts.com/highcharts/s ... pointRange

Best regards!

[JaagerBomb]

Hi rafalS,

I did not have time to check this post since last time sorry... But thanks for the new solution it is even better than the one you gave me before ! Thanks a lot for everything !

Best regards !!