Plot bands on top chart only of multiple synchronized charts?

[rmicalet]

I have synchronized HighStock charts--multiple y-axes (all logarithmic) sharing the same x-axis. I would like to put plot bands on only the top chart of the synchronized charts.

Is this possible using plot bands?

I came across a StackOverflow answer that recommended plotting area charts on top of the line chart to represent the plot bands. I can do that but the area charts top out at 100% (regardless of how high I set the area chart data), whereas the line chart data goes beyond that.

I could rescale my line chart data to max out at 100%, but then how would I apply the correct y-axis tick labels to the data so that 100% would actually be labeled as the true max value of the data?

I would be incredibly grateful for any suggestions or advice.

[kamil.k]

Hello rmicalet,

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

I'd be glad to help, but since it seems to be a bit more complicated, I need to be sure, we're on the same track here. Would you be able to share your current charts configs? You can start here: https://jsfiddle.net/BlackLabel/dfjbs921/, and send me a forked link. Also, would be much more helpful for me, if you could link the mentioned SO topic.

Looking forward to your response,
Kind Regards!

[rmicalet]

Unfortunately, I am a novice JS coder and use Highcharts via the R highcharter package. I would barely know where to start when it comes to creating a fiddle. (I'd be happy to share my R highcharter code, however.)
That said, I've attached three figures that characterize the problem I'm running into. The first is when I use x-axis plot bands for the stacked, synchronized charts, the plot bands appear on both the top and bottom chart.
The second and third show what happens when I don't use plot bands, but instead plot an area chart on top of the line chart. When I set the "threshold" attribute to the max of the y-axis, it plots the area from 100% to the top of the chart. When I set the threshold to 0, it plots the area from the bottom of the chart to 100%.
Both charts have log y-axes, which I think is part of the problem (for the second method of plotting an area chart to represent plot bands).
Also, I'm having trouble finding the SO post that recommended the area chart workaround, but I'll keep looking.

[kamil.k]

Thanks for the examples!

Let me start with a quick explanation. As you mentioned, I assume you use two separate charts here to achieve a synchronized charts effect. In general, you can share many functionalities, but what I see on the screens is the x-axis shared only. I'd recommend basing it on the same chart but multiple series. You can then assign each series to the according y-axis, and all of them to the same x-axis. Please, take a look: https://jsfiddle.net/BlackLabel/62e5qwa1/.

As you can see, the plotBands are set on the y-axis assigned to the first (top) series (it's being assigned to the first y-axis by default when no series.yAxis provided). Note, that I used the top and height properties on y-axes to position them properly.

Also, please refer to our API for a better understanding of the properties I used:
- https://api.highcharts.com/highstock/yAxis.height
- https://api.highcharts.com/highstock/yAxis.top
- https://api.highcharts.com/highstock/yAxis.offset
- https://api.highcharts.com/highstock/series.line.yAxis

I assume you have a more complex config than above if the plotBands goes through two charts, so it still would be helpful if you could share it. If so, I think you should handle it in a similar way, because the plotBands are in the scope of an according axis, so they don't spread to the other one.

Let me know if we're on the same track here, also if there are any reasons for using multiple charts instead of multiple series on the same one,
Regards!

[rmicalet]

Kamil,
Thank you for your reply. Yes, it's true, I could consolidate all of the data onto one chart. That's an option.
But if I wanted to have synchronized charts (synchronized along the x-axis) but have only the top one have plot bands--also along the x-axis--is that possible? I'm thinking it might not be. If it isn't, it's not the end of the world. C'est la vie.
The area chart overlay example I provided was misleading in that the chart showed a solid color the whole way across, where in practice it would be vertically striped as in the first screenshotted figure.

[kamil.k]

Thanks for the clarification, I can see the issue now.

According to the previous example with only one chart, you can also try to use the plotBands.acrossPanes property to decide whether the plotBand should be across the y-axes.

According to your latest mention, it's pretty straightforward to keep multiple charts, see: https://jsfiddle.net/BlackLabel/Lx329b17/. I keep two x-axes here, but the one related to the top chart is hidden in the CSS styles (by the className reference set on the axis). It's a bit tricky because disabling it with the xAxis.enabled property, disables the plotBands as well. Also, I added some functionalities above the charts to visualize the synchronized effect.

Let me know if that works for you,
Regards!