Dash subplots overlaid instead of stacking

Trying to have two subplots stacked on top of each other and sharing the x axis. Instead end up with two subplots that are overlaid on top of each other and one is not even visible. Any help appreciated.

import plotly.graph_objs as go
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from dash.dependencies import Output, Input
import plotly
import dash

app = dash.Dash(__name__, static_folder="static")
server = app.server
app.config.suppress_callback_exceptions = True
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

data = b'\x84\xa3typ\xadblock_manager\xa5klass\xa9DataFrame\xa4axes\x92\x86\xa3typ\xa5index\xa5klass\xa5Index\xa4name\xc0\xa5dtype\xa6object\xa4data\x95\xa4open\xa4high\xa3low\xa5close\xa6volume\xa8compress\xc0\x88\xa3typ\xaedatetime_index\xa5klass\xadDatetimeIndex\xa4name\xa4date\xa5dtype\xb3datetime64[ns, UTC]\xa4data\xc7\xf8\x00\x00\x00\xb7{\xac\xb75\x15\x00\x00\x06\rA\x066\x15\x00\x00\xf3\xc0\xfe\xf16\x15\x00\x00BR\x93@7\x15\x00\x00\x91\xe3\'\x8f7\x15\x00\x00\xe0t\xbc\xdd7\x15\x00\x00/\x06Q,8\x15\x00\x00\x1c\xba\x0e\x189\x15\x00\x00kK\xa3f9\x15\x00\x00\xba\xdc7\xb59\x15\x00\x00\tn\xcc\x03:\x15\x00\x00X\xff`R:\x15\x00\x00E\xb3\x1e>;\x15\x00\x00\x94D\xb3\x8c;\x15\x00\x00\xe3\xd5G\xdb;\x15\x00\x002g\xdc)<\x15\x00\x00\x81\xf8px<\x15\x00\x00n\xac.d=\x15\x00\x00\xbd=\xc3\xb2=\x15\x00\x00[`\xecO>\x15\x00\x00\xaa\xf1\x80\x9e>\x15\x00\x00\x97\xa5>\x8a?\x15\x00\x00\xe66\xd3\xd8?\x15\x00\x005\xc8g\'@\x15\x00\x00\x84Y\xfcu@\x15\x00\x00\xd3\xea\x90\xc4@\x15\x00\x00\xc0\x9eN\xb0A\x15\x00\x00\x0f0\xe3\xfeA\x15\x00\x00^\xc1wMB\x15\x00\x00\xadR\x0c\x9cB\x15\x00\x00\xfc\xe3\xa0\xeaB\x15\xa4freq\xc0\xa2tz\xa3UTC\xa8compress\xc0\xa6blocks\x92\x86\xa4locs\x86\xa3typ\xa7ndarray\xa5shape\x91\x04\xa4ndim\x01\xa5dtype\xa5int64\xa4data\xc7 \x00\x00\x00\x00\x00\x00\x00\x00\x00\x01\x00\x00\x00\x00\x00\x00\x00\x02\x00\x00\x00\x00\x00\x00\x00\x03\x00\x00\x00\x00\x00\x00\x00\xa8compress\xc0\xa6values\xc8\x03\xe0\x00=\n\xd7\xa3p=\xf2?q=\n\xd7\xa3p\xf1?\x00\x00\x00\x00\x00\x00\xf4?\xf6(\\\x8f\xc2\xf5\xf4?\xb8\x1e\x85\xebQ\xb8\xfa?{\x14\xaeG\xe1z\x00@\xd7\xa3p=\n\xd7\xff?\xecQ\xb8\x1e\x85\xeb\xf9?{\x14\xaeG\xe1z\xf4?\xecQ\xb8\x1e\x85\xeb\xfd?\x8f\xc2\xf5(\\\x8f\x00@\x9a\x99\x99\x99\x99\x99\xf9?\xd7\xa3p=\n\xd7\xeb?\x85\xebQ\xb8\x1e\x85\xe3?ffffff\xe6?\xaeG\xe1z\x14\xae\xd7?\x85\xebQ\xb8\x1e\x85\xe3?\x00\x00\x00\x00\x00\x00\xe0?\xd7\xa3p=\n\xd7\xe3?\x9a\x99\x99\x99\x99\x99\xd9?\x9a\x99\x99\x99\x99\x99\xe1?q=\n\xd7\xa3p\xed?\x9a\x99\x99\x99\x99\x99\xf1?\\\x8f\xc2\xf5(\\\xe7?\x00\x00\x00\x00\x00\x00\xf0?\x1f\x85\xebQ\xb8\x1e\xfd?\xd7\xa3p=\n\xd7\xfb?\\\x8f\xc2\xf5(\\\xe7?333333\xff?\x00\x00\x00\x00\x00\x00\xf4?\x8f\xc2\xf5(\\\x8f\xf6?)\\\x8f\xc2\xf5(\xf4?\xc3\xf5(\\\x8f\xc2\xf1?q=\n\xd7\xa3p\xf5?{\x14\xaeG\xe1z\xf8?R\xb8\x1e\x85\xebQ\x00@\x9a\x99\x99\x99\x99\x99\x01@\xd7\xa3p=\n\xd7\xff?R\xb8\x1e\x85\xebQ\xfc?q=\n\xd7\xa3p\xf9?\xe1z\x14\xaeG\xe1\x02@\x8f\xc2\xf5(\\\x8f\x00@\x9a\x99\x99\x99\x99\x99\xf9?\xd7\xa3p=\n\xd7\xeb?\x00\x00\x00\x00\x00\x00\xe8?H\xe1z\x14\xaeG\xe9?\\\x8f\xc2\xf5(\\\xdf?\xcd\xcc\xcc\xcc\xcc\xcc\xe4?=\n\xd7\xa3p=\xe2?\xd7\xa3p=\n\xd7\xe3?\xe1z\x14\xaeG\xe1\xda?\x9a\x99\x99\x99\x99\x99\xe9?\xcd\xcc\xcc\xcc\xcc\xcc\xf0?\xd7\xa3p=\n\xd7\xf3?)\\\x8f\xc2\xf5(\xec?R\xb8\x1e\x85\xebQ\xfc?=\n\xd7\xa3p=\x00@\x9a\x99\x99\x99\x99\x99\xfd?\\\x8f\xc2\xf5(\\\x01@\xb8\x1e\x85\xebQ\xb8\x00@\x9a\x99\x99\x99\x99\x99\xf9?\xe1z\x14\xaeG\xe1\xfa?=\n\xd7\xa3p=\xf2?\x00\x00\x00\x00\x00\x00\xf0?\xaeG\xe1z\x14\xae\xf3?\xf6(\\\x8f\xc2\xf5\xf4?\xb8\x1e\x85\xebQ\xb8\xfa?R\xb8\x1e\x85\xebQ\x00@\xaeG\xe1z\x14\xae\xfb?\xf6(\\\x8f\xc2\xf5\xf4?\x00\x00\x00\x00\x00\x00\xf4?\xecQ\xb8\x1e\x85\xeb\xfd?\\\x8f\xc2\xf5(\\\xfb?\x1f\x85\xebQ\xb8\x1e\xf5?\x00\x00\x00\x00\x00\x00\xe0?\x85\xebQ\xb8\x1e\x85\xe3?\x85\xebQ\xb8\x1e\x85\xdb?\xaeG\xe1z\x14\xae\xd7?\x00\x00\x00\x00\x00\x00\xe0?\\\x8f\xc2\xf5(\\\xdf?\xe1z\x14\xaeG\xe1\xda?\x8f\xc2\xf5(\\\x8f\xd2?\xf6(\\\x8f\xc2\xf5\xe0?\x9a\x99\x99\x99\x99\x99\xe9?\x14\xaeG\xe1z\x14\xee?ffffff\xe6?\xc3\xf5(\\\x8f\xc2\xed?\x9a\x99\x99\x99\x99\x99\xf9?\\\x8f\xc2\xf5(\\\xef?\\\x8f\xc2\xf5(\\\xe7?\xaeG\xe1z\x14\xae\xf7?{\x14\xaeG\xe1z\xf0?\xc3\xf5(\\\x8f\xc2\xed?\xd7\xa3p=\n\xd7\xf3?\xc3\xf5(\\\x8f\xc2\xf1?q=\n\xd7\xa3p\xf5?\xaeG\xe1z\x14\xae\xf7?)\\\x8f\xc2\xf5(\xfc?\x9a\x99\x99\x99\x99\x99\x01@\x1f\x85\xebQ\xb8\x1e\xfd?\x85\xebQ\xb8\x1e\x85\xfb?\xcd\xcc\xcc\xcc\xcc\xcc\xf8?333333\x01@\xaeG\xe1z\x14\xae\xfb?ffffff\xf6?\x85\xebQ\xb8\x1e\x85\xe3?)\\\x8f\xc2\xf5(\xe4?\x85\xebQ\xb8\x1e\x85\xdb?\\\x8f\xc2\xf5(\\\xdf?R\xb8\x1e\x85\xebQ\xe0?=\n\xd7\xa3p=\xe2?\xe1z\x14\xaeG\xe1\xda?\xe1z\x14\xaeG\xe1\xda?\xf6(\\\x8f\xc2\xf5\xe8?\xcd\xcc\xcc\xcc\xcc\xcc\xf0?\xf6(\\\x8f\xc2\xf5\xf0?R\xb8\x1e\x85\xebQ\xe8?\x00\x00\x00\x00\x00\x00\xfc?R\xb8\x1e\x85\xebQ\xfc?)\\\x8f\xc2\xf5(\xf0?\x00\x00\x00\x00\x00\x00\x00@\x8f\xc2\xf5(\\\x8f\xfa?\x8f\xc2\xf5(\\\x8f\xf2?\xaeG\xe1z\x14\xae\xef?\xa5shape\x92\x04\x1f\xa5dtype\xa7float64\xa5klass\xaaFloatBlock\xa8compress\xc0\x86\xa4locs\x86\xa3typ\xa7ndarray\xa5shape\x91\x01\xa4ndim\x01\xa5dtype\xa5int64\xa4data\xd7\x00\x04\x00\x00\x00\x00\x00\x00\x00\xa8compress\xc0\xa6values\xc7\xf8\x00\x96\x13\x00\x00\x00\x00\x00\x00\x9f\x13\x00\x00\x00\x00\x00\x00\x1b\x00\x00\x00\x00\x00\x00\x00\x14\x00\x00\x00\x00\x00\x00\x002\x00\x00\x00\x00\x00\x00\x00\x15\x00\x00\x00\x00\x00\x00\x00:\x00\x00\x00\x00\x00\x00\x00U\x00\x00\x00\x00\x00\x00\x00!\x00\x00\x00\x00\x00\x00\x00.\x00\x00\x00\x00\x00\x00\x00)\x00\x00\x00\x00\x00\x00\x00\x0f\x00\x00\x00\x00\x00\x00\x00\xc5Z\x00\x00\x00\x00\x00\x00S\x1f\x00\x00\x00\x00\x00\x00E\x00\x00\x00\x00\x00\x00\x00*\x00\x00\x00\x00\x00\x00\x00>\x00\x00\x00\x00\x00\x00\x006\x00\x00\x00\x00\x00\x00\x001\x00\x00\x00\x00\x00\x00\x00\x0c\x02\x00\x00\x00\x00\x00\x00E\x08\x00\x00\x00\x00\x00\x00\x8a\x04\x00\x00\x00\x00\x00\x00\xbc.\x00\x00\x00\x00\x00\x00\xd8+\x00\x00\x00\x00\x00\x00\xa3\x08\x00\x00\x00\x00\x00\x00\x0c.\x00\x00\x00\x00\x00\x00\xd8/\x00\x00\x00\x00\x00\x00N\x0e\x00\x00\x00\x00\x00\x00\x08\x13\x00\x00\x00\x00\x00\x00\x19 \x00\x00\x00\x00\x00\x00\x1c"\x00\x00\x00\x00\x00\x00\xa5shape\x92\x01\x1f\xa5dtype\xa5int64\xa5klass\xa8IntBlock\xa8compress\xc0'


def get_points(my_data):
    trace = [
        go.Candlestick(
            x=my_data.index,
            open=my_data.open,
            high=my_data.high,
            low=my_data.low,
            close=my_data.close,
            name='Daily Bars',

        ),
        go.Bar(
            x=my_data.index,
            y=my_data.volume,
            name='Daily Volume'
        )

    ]

    return {
        'data': trace,
        'layout': go.Layout(
            title=f'Daily bars',
            showlegend=True,
            legend=go.Legend(
                x=0,
                y=1.0
            ),
            margin=go.Margin(l=100, r=40, t=40, b=30),
        )
    }


app.layout = html.Div(className='container',
                  children=[
                      dcc.Graph(
                          style={'height': 500},
                          id='my-bar-candle',
                          className='col',
                      ),
                      dcc.Interval(
                          id='interval-component',
                          interval=600 * 1000,  # in milliseconds
                          n_intervals=0
                      ),

                  ])


@app.callback(Output('my-bar-candle', 'figure'),
              [Input('interval-component', 'n_intervals'),
               ])
def update_bars_figure(n_intervals):
    con_df = pd.read_msgpack(data)
    my_points = get_points(con_df)
    fig = plotly.tools.make_subplots(rows=2, cols=1, vertical_spacing=1, shared_xaxes=True, shared_yaxes=False)
    fig.append_trace(trace=my_points['data'][0], row=1, col=1)
    fig.append_trace(trace=my_points['data'][1], row=2, col=1)
    fig['layout'] = my_points['layout']

    return fig

if __name__ == '__main__':
    app.run_server(debug=True,port=4003)
1 Like

Hey @llevar

Perhaps try creating subplots this way https://plot.ly/python/subplots/#stacked-subplots-with-a-shared-xaxis

1 Like