Hi All,
I have created a dash with bar chart that compares two categories over a period time as Figure below.
However, I have added a drop-down to filter the amount of date periods in the chart. When the drop-down filter is applied, the column height does not look right compare with the values, as shown below.
How can it be fixed? or is it a bug ?
Here is the example code:
@app.callback(
Output('bar-chart_1', 'children'),
Input('spreadsheet', 'data'),
Input('dropdown', 'value')
)
def update_graph(rows, values: list):
#filtering the data
data = pd.DataFrame(rows)
data['Date'] = pd.to_datetime(data['Date'])
data1 = data.query('Category == "One"').reset_index()
data2 = data.query('Category == "Two"').reset_index()
df_one = data1.groupby([pd.Grouper(key='Date', freq='M', closed='left', label='left')]).sum(numeric_only=True).reset_index()
df_two = data2.groupby([pd.Grouper(key='Date', freq='M', closed='left', label='left')]).sum(numeric_only=True).reset_index()
#Ploting the graph
if values:
df_one_filtered = df_one.query('Date in @values')
df_two_filtered = df_two.query('Date in @values')
fig = go.Figure()
fig.add_trace(go.Bar(x=df_two_filtered["Date"], y=df_two_filtered['Amount'],
name = "two", textangle=0, textposition='outside', marker_color='#6fdc6f', marker_line=dict(width=2, color='black')
))
fig.add_trace(go.Bar(x=df_one_filtered["Date"], y=df_one_filtered['Amount'],
name = "one", textangle=0, textposition='outside', marker_color='#ff6666', marker_line=dict(width=2, color='black')
))
fig.update_layout(
paper_bgcolor='rgba(0,0,0,0)',
plot_bgcolor='rgba(0,0,0,0)',
bargap=0.1,
xaxis_title_text='Date',
yaxis_title_text='Amount',
font_family='Arial',
xaxis=dict(tickmode='array', tickvals= df_one_filtered['Date'], ticktext = df_one_filtered['Date'].apply(lambda x: x.strftime('%d-%b-%Y')),automargin=True),
)
fig.update_yaxes(showgrid=False, tickfont=dict(family='Arial', color='black', size=14),showline=True, linewidth=2, linecolor='black', mirror=False)
fig.update_xaxes(type='category', tickfont=dict(family='Arial', color='black', size=14), showline=True, linewidth=2, linecolor='black', mirror=False)
return html.Div(children=dcc.Graph(figure=fig), id='bar-chart_1')
else:
return html.Div("No data selected", className='no-data')
return html.Div(id='bar-chart_1')
Thanks