# Heatmap - cell border

**URL:** <https://community.plotly.com/t/heatmap-cell-border/62413>\
**Category:** Dash Python\
**Created:** [March 29, 2022, 3:07am UTC](https://community.plotly.com/t/heatmap-cell-border/62413 "2022-03-29T03:07:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kiteme](https://avatars.discourse-cdn.com/v4/letter/k/d26b3c/32.png) [@kiteme](https://community.plotly.com/u/kiteme)\
**Post date:** [March 29, 2022, 3:07am UTC](https://community.plotly.com/t/heatmap-cell-border/62413/1 "2022-03-29T03:07:03Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/2/e/2e0fc625150b95d23d34d47f2c9b8bf127d518c7.png)  
but what I need is to display it like this:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/f/8/f8676ff01220915a19151e6318ad8f7f8ccd80c0.png)

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

---

<div class="post-metadata">

**Author:** ![RenaudLN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/renaudln/32/9041_2.png) [@RenaudLN](https://community.plotly.com/u/RenaudLN)\
**Post date:** [March 29, 2022, 7:50am UTC](https://community.plotly.com/t/heatmap-cell-border/62413/2 "2022-03-29T07:50:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RenaudLN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/renaudln/32/9041_2.png) [@RenaudLN](https://community.plotly.com/u/RenaudLN)\
**Post date:** [March 29, 2022, 10:14am UTC](https://community.plotly.com/t/heatmap-cell-border/62413/3 "2022-03-29T10:14:31Z")

</div>

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

```python
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/0/f/0f1efff6f857e2de626557365f030774c97a4a3e.png)

---

<div class="post-metadata">

**Author:** ![kiteme](https://avatars.discourse-cdn.com/v4/letter/k/d26b3c/32.png) [@kiteme](https://community.plotly.com/u/kiteme)\
**Post date:** [March 30, 2022, 8:18am UTC](https://community.plotly.com/t/heatmap-cell-border/62413/4 "2022-03-30T08:18:45Z")

</div>

Just the idea I needed!  
Thank you!