How can i 2 graph over each other?

[bilallozdemir]

Hi,
My problem is clear with image. Big red one is horizontal bar plot and small one is counter bar. But I cant do this with dcc.Row or something. How can I do this?
Thanks in advance!

[Jwolf]

You can get a custom layout like this using CSS grid (https://www.w3schools.com/css/css_grid.asp)

app.layout = html.Div([
    html.Div(
        style={
            'background-color':'red',
            'grid-row' : '1/4'
        }),
    html.Div(
        style={
            'background-color':'blue',
            'grid-row' : '1/4'
        }
    ),
    html.Div(
        style={
            'background-color':'green',
            'grid-row' : '1/2'
        }
    ),
    html.Div(
        style={
            'background-color':'orange',
            'grid-row' : '2/7'
        }
    ),
    html.Div(
        style={
            'background-color':'yellow',
            'grid-row' : '4/7'
        }
    ),
    html.Div(
        style={
            'background-color':'black',
            'grid-row' : '4/7'
        }
    )
], style = {
    'height': '800px',
    'width': '100%',
    'background': 'LightGray',
    'display': 'grid',
    'grid-template-columns': '1fr 1fr 1fr',
    'grid-template-rows': '1fr 1fr 1fr 1fr 1fr 1fr',
    'grid-gap': '10px',
})