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:
