Plotting line and bar charts on the same figure

Dash Python
1

Hi everyone.

I have the following scenario: I have some data this is split into quarters and other data that is aggregated by year. I’d like to display the aggregate data as a single bar chart for the year and the split data as a line chart plotted over this bar. But I cannot find a way to display both together. Is that possible? I’ve attached an image below with the expected result.

traces3
traces31812×450 16.8 KB

Here’s what I’ve tried:

  • (option 1) repeating the aggregated that for each quarter, but then I get four separated bars (as expected, actually).
    It’s worth mentioning that I also tried this option with bargap=0, which is not great but would work. But it seems the bargap applies to all sub plots and it messes another chart that I have on the figure (not pictured here).

    traces1
    traces11812×450 18.1 KB

  • (option 2) then, I tried plotting the bar char with a single data point for that year, but the line chart is not displayed when I try that.

    traces2
    traces21812×450 2.96 KB

Also, here’s the code for that:

import plotly.graph_objects as go

year = [2022, 2022, 2022, 2022]
quarter = [1, 2, 3, 4]
values1 = [10, 10, 10, 10]
values2 = [10, 20, 5, 12]

# option 1
fig = go.Figure(
    data=[
        go.Bar(x=[year, quarter], y=values1),
        go.Scatter(x=[year, quarter], y=values2)
    ]
)
fig.show()

# option 2
fig2 = go.Figure(
    data=[
        go.Bar(x=[2022], y=[10]),
        go.Scatter(x=[year, quarter], y=values2)
    ]
)
fig2.show()

Thank you,
Diego