Filled area behind behind bar in Python?

📊 Plotly Python
1

Hello
I’d like to create a plot like the picture, but with the filled area behind the bars rather than overlaid. Is this possible? Ideally I want the line to still be above the bars, but the area to be behind. It looks like this whichever order I pass the traces in.

image
image.png956×487 19.6 KB

Thanks
Sam

2

Yep, just pass in the line chart before the bar chart in the data array and you should be good-to-go.

4

Thank you for the answer :slight_smile: Unfortunately it doesn’t seem to work for me. e.g:

line_data = bar_data[::-1]/2
index = np.arange(10)

trace1 = go.Scatter(
    x=index,
    y=line_data,
    name="Filled line",
    mode ="lines+markers",
    fill = "tozeroy",
    fillcolor = 'rgba(1,1,1, 0.8)',
    line = dict(
        width = 1),
    marker = dict(
        color = "#333",
        size = 5,
        symbol = '.'))

trace2 = go.Bar(
    x=index,
    y=bar_data,
    name="Bar")

traces = [
    trace1,
    trace2
]


layout = go.Layout(
    xaxis=dict(title='x axis'),
    yaxis=dict(title='y axis'),

    legend=dict(xanchor="center", orientation="h", x=0.5, y=-0.2),
    title='Title'
)

fig = go.Figure(data=traces, layout=layout)
py.iplot(fig)

gives the same whichever order I pass in the two traces (except that the colour of the bars shifts between blue and orange).

image
image.png981×527 15.4 KB

Am using plotly.offline and version 2.0.13.
Thanks
Sam

6

Did you ever find a solution to this issue? I am experiencing the same problem now.

Thanks!

7

For this you can add a second y axis y2 overlaying y, as below

import plotly.graph_objects as go
import numpy as np
index = np.arange(10)
line_data = np.arange(10)
bar_data = np.ones(10)
bar_data[::2] = 2

trace1 = go.Scatter(
    x=index,
    y=line_data,
    name="Filled line",
    mode ="lines+markers",
    fill = "tozeroy",
    fillcolor = 'rgba(1,1,1, 0.8)',
    line = dict(
        width = 1),
    marker = dict(
        color = "#333",
        size = 5))

trace2 = go.Bar(
    x=index,
    y=bar_data,
    name="Bar",
    yaxis="y2")

traces = [
    trace1,
    trace2
]

fig = go.Figure(data=traces)
fig.update_layout(yaxis2=dict(overlaying='y'))
fig.show()