# How to draw a diagonal line in the background of a scatter plot?

**URL:** <https://community.plotly.com/t/how-to-draw-a-diagonal-line-in-the-background-of-a-scatter-plot/44701>\
**Category:** 📊 Plotly Python\
**Created:** [September 9, 2020, 11:03am UTC](https://community.plotly.com/t/how-to-draw-a-diagonal-line-in-the-background-of-a-scatter-plot/44701 "2020-09-09T11:03:42Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tvogel](https://avatars.discourse-cdn.com/v4/letter/t/94ad74/32.png) [@tvogel](https://community.plotly.com/u/tvogel)\
**Post date:** [September 9, 2020, 11:03am UTC](https://community.plotly.com/t/how-to-draw-a-diagonal-line-in-the-background-of-a-scatter-plot/44701/1 "2020-09-09T11:03:42Z")

</div>

In order to more easily compare correlation of scatter-plots to identity mapping, it would be great to have the first diagonal line being plotted just as the x-y-grid in the background of the plot.

I played with

```auto
    fig.update_layout(
        shapes=[
            dict(
                type= 'line',
                yref= 'y', y0=-1000, y1= 1000,
                xref= 'x', x0=-1000, x1= 1000
            )
        ])

```

but that obviously changes the plot extent. I chose arbitrarily high extent in order to cover all real value ranges.

I guess, there must be a more straight-forward way to add graph elements in the background (not taking any own extent)?

---

<div class="post-metadata">

**Author:** ![tszheichoi](https://avatars.discourse-cdn.com/v4/letter/t/8baadc/32.png) [@tszheichoi](https://community.plotly.com/u/tszheichoi)\
**Post date:** [October 28, 2020, 9:47pm UTC](https://community.plotly.com/t/how-to-draw-a-diagonal-line-in-the-background-of-a-scatter-plot/44701/2 "2020-10-28T21:47:24Z")

</div>

You can define the line in the paper coordinate instead of in the data’s coordinate.

`fig.update_layout(shapes = [{'type': 'line', 'yref': 'paper', 'xref': 'paper', 'y0': 0, 'y1': 1, 'x0': 0, 'x1': 1}])`

You will also need to set the `xaxis_range` and `yaxis_range` to be the same, otherwise, it won’t be a 1:1 line. Additionally, you may want to specify `'layer': 'below'` so that the line renders behind the scatter points.

---

<div class="post-metadata">

**Author:** ![mail8](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mail8/32/31560_2.png) [@mail8](https://community.plotly.com/u/mail8)\
**Post date:** [June 13, 2025, 8:20am UTC](https://community.plotly.com/t/how-to-draw-a-diagonal-line-in-the-background-of-a-scatter-plot/44701/3 "2025-06-13T08:20:47Z")

</div>

> [@tszheichoi](#):
>
> `fig.update_layout(shapes = [{'type': 'line', 'yref': 'paper', 'xref': 'paper', 'y0': 0, 'y1': 1, 'x0': 0, 'x1': 1}])`

Not great, when zoomed in you get the wrong diagonal. The line should eb according to the true coordinates.

```auto
import plotly.io as pio
pio.renderers.default = 'iframe'
fig = px.scatter(df, x='val_f1', y='test_f1', hover_data=['ID'])
# Add diagonal line x=y
fig.add_shape(
    type="line",
    x0=fig.data[0].x.min(), y0=fig.data[0].x.min(),
    x1=fig.data[0].x.max(), y1=fig.data[0].x.max(),
    line=dict(color="red", dash="dash")
)

```