Heatmap - cell border

Dash Python
1

Hi, is there any way to add a border for each cell (colored individually) in the heatmap?
I’m currently using heatmap to display data:
image
but what I need is to display it like this:
image

I know I can add shapes or use a scatter plot to achieve this - but then the scaling is wrong when zooming in/out.

2

I don’t believe that is an option with a heatmap (not exactly the primary use case!).

You may be able to achieve something like this with plotting a choroplethmapbox with “white-bg” for mapbox style but you’d have to create the geojson kind of manually.

3

Actually scrap that it’s possible by overlaying heatmaps with different xgap, ygap and colorscales

import plotly.graph_objects as go

go.Figure(
    data=[
        go.Heatmap(
            z=[[1, 1, 1], [1, 1, 1], [1, 1, 1]],
            xgap=4,
            ygap=4,
            colorscale=["#08a", "#08a"],
            showscale=False,
        ),
        go.Heatmap(
            z=[[1, 1, 1], [1, 1, 1], [1, 1, 1]],
            xgap=20,
            ygap=20,
            colorscale=["#fff", "#fff"],
            showscale=False,
        ),
    ],
).update_layout(
    yaxis_scaleanchor="x",
    plot_bgcolor="#fff",
    width=400,
    height=400,
    margin=dict(b=0, t=20, l=0, r=20)
)

image

3 Likes
Access background color from dash_bootstrap_templates inside dash callback
Plotly Heatmap Edge Color Change
4

Just the idea I needed!
Thank you!