Horizontal barchart whitelines between stacks

Dash Python
1

Hi, i’m making a horizontal barchart (gantt chart) in Dash to keep track of a certain sensor turning on and off.
The gist of it, turn red when off turn green when on. Simple right?

My code:

def light_tab(db, coll, desir):
    desired = mongo2df_update(db, coll, desir) # /sensor_02
    desired['time_end'] = desired['time'].shift(-1)
    now = datetime.now()

    desired['time_end'][-1:] = now
    discrete_map = {'OFF': '#B22222', 'ON': '#008000'}
    
    fig = px.timeline(desired, x_start="time", x_end="time_end", y="topic", color = 'payload', color_discrete_map=discrete_map, 
                        hover_data = {'payload':False, 'time':True, 'time_end':True, 'topic':False})
    fig.update_yaxes(autorange="reversed") # otherwise tasks are listed from the bottom up    
    fig.update_layout(showlegend=False, paper_bgcolor='rgba(0,0,0,0)',
                           plot_bgcolor='rgba(0,0,0,0)')
    fig.update_yaxes(visible=False, showticklabels=False)
    return fig

The issue:
Whitelines, and a lot of them. Some are actually green parts that, when zoomed into, are green but when zoomed out are white. I think this is because of rendering or something but it is detrimental to the graph to display when it actually had a color switch. Another thing is sometimes it just displays white lines when an “off” gets repeated. As if its stacking barcharts but keeps a white line in between.

Pictures of them:
Regular version
gantt

Zoomed into the whitelines
zoomed_gantt

Any help would be appreciated, or suggestions on a different graph option.