Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! ✅Check out the new docs.

Button Types on top of chart

Is it possible to create dcc.Buttons to look like the range-selector buttons?

I am trying to use a selector (radio/dropdown…doesn’t really matter) that can change the axis attributes but am having trouble getting it to be IN the actual graph… I would like the graph title, then the selections underneath it, and then the chart as shown in the screenshot.

The best I can get is next to or above the div that the graph is in…

@app.callback(
    Output('performance-canvas', 'children'),
    [Input('peloton-data-filtered', 'children')]
)
def performance_dashboard(df):
    df_summary, df_samples, = create_df(df, ['df_summary', 'df_samples'])
    return html.Div([
        html.Div(className='eight columns', children=[performance_management_chart(df_summary)]),
        dcc.RadioItems(
            id='zone-chart-toggle',
            options=[{'label': 'Power', 'value': 'power_zone'},
                     {'label': 'Heart Rate', 'value': 'heart_rate_zone'}],
            value='power_zone',
            labelStyle={'display': 'inline-block'},
            style={'textAlign': 'center'}
        ),
        html.Div(id='power-zone', className='three columns', children=[])
    ])

which gives this: