Add thin lines inbetween rectangles in plotly figure

Question

I am currently creating such a plot with Plotly, which indicates which Physician works which shift. Since the plot is a bit confusing, I would like to make a modification to the plot.Is it possible to add fine gray lines between the individual rectangles to differentiate the days and the doctors somewhat in color?

Here is the code for it:

def visualize_schedule(days, undercoverage):
 
dic = {(1, 1, 1): 1.0, (1, 1, 2): 0.0, (1, 1, 3): 0.0, (1, 2, 1): 0.0, (1, 2, 2): 1.0, (1, 2, 3): 0.0, (1, 3, 1): 0.0, (1, 3, 2): 0.0, (1, 3, 3): 0.0, (1, 4, 1): 0.0, (1, 4, 2): 1.0, (1, 4, 3): 0.0, (1, 5, 1): 1.0, (1, 5, 2): 0.0, (1, 5, 3): 0.0, (1, 6, 1): 0.0, (1, 6, 2): 1.0, (1, 6, 3): 0.0, (1, 7, 1): 0.0, (1, 7, 2): 1.0, (1, 7, 3): 0.0, (2, 1, 1): 1.0, (2, 1, 2): 0.0, (2, 1, 3): 0.0, (2, 2, 1): 1.0, (2, 2, 2): 0.0, (2, 2, 3): 0.0, (2, 3, 1): 1.0, (2, 3, 2): 0.0, (2, 3, 3): 0.0, (2, 4, 1): 0.0, (2, 4, 2): 0.0, (2, 4, 3): 0.0, (2, 5, 1): 1.0, (2, 5, 2): 0.0, (2, 5, 3): 0.0, (2, 6, 1): 0.0, (2, 6, 2): 0.0, (2, 6, 3): 1.0, (2, 7, 1): 0.0, (2, 7, 2): 1.0, (2, 7, 3): 0.0, (3, 1, 1): 1.0, (3, 1, 2): 0.0, (3, 1, 3): 0.0, (3, 2, 1): 0.0, (3, 2, 2): 1.0, (3, 2, 3): 0.0, (3, 3, 1): 0.0, (3, 3, 2): 0.0, (3, 3, 3): 0.0, (3, 4, 1): 1.0, (3, 4, 2): 0.0, (3, 4, 3): 0.0, (3, 5, 1): 1.0, (3, 5, 2): 0.0, (3, 5, 3): 0.0, (3, 6, 1): 1.0, (3, 6, 2): 0.0, (3, 6, 3): 0.0, (3, 7, 1): 0.0, (3, 7, 2): 1.0, (3, 7, 3): 0.0}

s = pd.Series(dic)

data = (s.loc[lambda s: s == 1]
       .reset_index(-1)['level_2'].unstack(fill_value=0)
       .reindex(index=s.index.get_level_values(0).unique(),
                columns=s.index.get_level_values(1).unique(),
                fill_value=0
                )
       )

data.index = data.index.astype(int)
data.columns = data.columns.astype(str)

title_str = f'Physician Schedules | Total Undercoverage: {undercoverage}'
fig = px.imshow(data[[str(i) for i in range(1, days + 1)]],
                color_continuous_scale=["purple", "orange", "yellow", 'pink'])

fig.update(data=[{'hovertemplate': "Day: %{x}<br>"
                                   "Physician: %{y}<br>"}])

colorbar = dict(thickness=35,
                tickvals=[0, 1, 2, 3],
                ticktext=['Off', 'Evening', 'Noon', 'Morning'])

fig.update(layout_coloraxis_showscale=True, layout_coloraxis_colorbar=colorbar)

x_ticks = np.arange(1, days + 1)
day_labels = ['Day ' + str(i) for i in x_ticks]
fig.update_xaxes(tickvals=x_ticks, ticktext=day_labels)

y_ticks = np.arange(1, data.shape[0] + 1)
physician_labels = ['Physician ' + str(i) for i in y_ticks]
fig.update_yaxes(tickvals=y_ticks, ticktext=physician_labels)

fig.update_layout(
    title={
        'text': title_str,
        'y': 0.98,
        'x': 0.5,
        'xanchor': 'center',
        'yanchor': 'top',
        'font': {'size': 24}
    }
)

fig.update_layout(
    xaxis=dict(
        showgrid=True,
        gridwidth=1.5,
        gridcolor='LightGray'
    ),
    yaxis=dict(
        showgrid=True,
        gridwidth=1.5,
        gridcolor='LightGray'
    )
)

fig.show()
return fig

Answer 1

Since the heatmap grid does not seem to be controllable, the idea is to add gaps on the x- and y-axes and set the background color of the graph based on the reference example.

import plotly.graph_objects as go

fig = go.Figure(data=go.Heatmap(
    z=[[1, 76, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
    x=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    y=['Morning', 'Afternoon', 'Evening'],
    hoverongaps=False,
    xgap=2,
    ygap=2    
))
fig.update_layout(plot_bgcolor='rgba(211, 211, 211, 1)')
fig.update_xaxes(showgrid=False)
fig.update_yaxes(showgrid=False)
fig.show()