Some bars are missing from the plotly dash plot randomly - plotly-dash

Question

I am creating a dashboard using Plotly Dash which contains plots with a bar and a line graph on the common x axis. The code is working fine when I run it, however when I am selecting different options from the dropdown to change the graph, some bars go missing from the plot randomly for some options.
Here is an example that’s working perfectly fine.perfectly fine image
And here is an example where a bar goes missing from the plot when i select a different option from dropdown.
image with missing bar
I am not sure what’s wrong. I have checked if the data is missing for the missing bar but it’s there and when I am hovering over the missing bar area in the plot, it is also showing me the value there but not the bar. For reference, here is my code…
trace1 = go.Scatter(
mode='lines+markers+text',
x = df1['Date'],
y = df1['AVG'],
name="Avg time(mins)",
text=df1['AVG'],
textposition='bottom right',
textfont_color='black',
marker_color='blue',
opacity=1
)
trace2 = go.Bar(
x = df1['Date'],
y = df1['Id_Count'],
name="Count",
ids=df1['Id_Count'],
text=df1['Id_Count'],
textposition='inside',
insidetextfont_color='#45FC03',
hoverinfo='x+y',
yaxis='y2',
marker_color ='#180702',
marker_line_width=1.5,
marker_line_color='black',
opacity=0.72
)
data1 = [trace1, trace2]
layout1 = go.Layout(
title_text='Day wise stats',
title_font_color='#45FC03',
width=1300,
height=400,
yaxis=dict(
side = 'right'
),
yaxis2=dict(
overlaying='y',
anchor='y3',
)
)
fig1 = go.Figure(data=data1, layout=layout1)
fig1.update_layout(template='plotly_dark',
plot_bgcolor='#F0E199', paper_bgcolor='#282522', margin_l=50, margin_t=80, margin_b=60)
fig1.update_xaxes(showgrid=False, zeroline=False)
fig1.update_yaxes(showgrid=False, zeroline=False)
Please, any help would be appreciated for a solution to this problem.

Answer 1

contents of bars is based on data in dataframe
below code shows bar disappears if underlying dataframe has NaN as value
import pandas as pd
import numpy as np
import plotly.graph_objects as go
df1 = pd.DataFrame({"Date":pd.date_range("28-sep-2021", freq="D", periods=7), "AVG":np.round(np.random.uniform(2,5,7),2), "Id_Count":np.random.randint(2000,3000,7)})
def graph(df1):
trace1 = go.Scatter(
mode='lines+markers+text',
x = df1['Date'],
y = df1['AVG'],
name="Avg time(mins)",
text=df1['AVG'],
textposition='bottom right',
textfont_color='black',
marker_color='blue',
opacity=1
)
trace2 = go.Bar(
x = df1['Date'],
y = df1['Id_Count'],
name="Count",
ids=df1['Id_Count'],
text=df1['Id_Count'],
textposition='inside',
insidetextfont_color='#45FC03',
hoverinfo='x+y',
yaxis='y2',
marker_color ='#180702',
marker_line_width=1.5,
marker_line_color='black',
opacity=0.72
)
data1 = [trace1, trace2]
layout1 = go.Layout(
title_text='Day wise stats',
title_font_color='#45FC03',
width=800,
height=400,
yaxis=dict(
side = 'right'
),
yaxis2=dict(
overlaying='y',
anchor='y3',
)
)
fig1 = go.Figure(data=data1, layout=layout1)
fig1.update_layout(template='plotly_dark',
plot_bgcolor='#F0E199', paper_bgcolor='#282522', margin_l=50, margin_t=80, margin_b=60)
fig1.update_xaxes(showgrid=False, zeroline=False)
fig1.update_yaxes(showgrid=False, zeroline=False)
return fig1
graph(df1).show()
df1.loc[df1.sample(1).index, "Id_Count"] = np.nan
graph(df1).show()