How to get bar chart in front of stacked area chart?

plotly.js
1

Hello, I’ve been using Plotly for a few days now attempting to recreate some charts that are currently done in Excel. I am attempting to use stacked area chart to depict utilization thresholds and then have a bar chart draw over it.

I have not been able to get my bars to draw in front of the area chart. Currently, the bars are drawn behind the area chart: https://jsfiddle.net/kimasu/rbysyg62/

Also, can the stacked area (green/orange/red) stretch all the way to each side of the chart, instead of cutting off in the center of the bar?

Thanks; any help would be appreciated!

2

I was able to get the bar chart to stack on top of the area chart by using a second axis and overlaying it: https://jsfiddle.net/kimasu/hf36au3d/

If it is possible to stretch the stacked area all the way to the edge of the chart, so that it doesn’t stop right in the middle of the bar, I would like to know how. I’ll keep experimenting.

3

Maybe try using tickvals and ticktext like in

https://jsfiddle.net/hf36au3d/2/

1 Like
4

Brilliant! Thanks so much @etienne.