# plotly.graph\_object.Scatter plot fill color map

**URL:** <https://community.plotly.com/t/plotly-graph-object-scatter-plot-fill-color-map/71479>\
**Category:** 📊 Plotly Python\
**Tags:** question\
**Created:** [January 10, 2023, 3:35am UTC](https://community.plotly.com/t/plotly-graph-object-scatter-plot-fill-color-map/71479 "2023-01-10T03:35:58Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jimy](https://avatars.discourse-cdn.com/v4/letter/j/bcef8e/32.png) [@jimy](https://community.plotly.com/u/jimy)\
**Post date:** [January 10, 2023, 3:35am UTC](https://community.plotly.com/t/plotly-graph-object-scatter-plot-fill-color-map/71479/1 "2023-01-10T03:35:58Z")

</div>

Dear Help,

I am very new to plotly and I have spent a lot of time searching for a solution to my hopefully simple problem.

I want to fill the area between two lines using a continuous color map. In the example below, I have two lists for the low and high temperature limits, and want to fill between the two limits with a continuous colormap instead of just one solid color, using the red color to represent the highest temperature (ie 94) and blue for the lowest temperature (32). Any suggestions/comments are much appreciated.

import plotly.graph\_objects as go  
x = [1, 2, 3, 4, 5, 6, 7]  
lowT = [35, 32, 41, 70, 79, 60, 38]  
hiT = [48, 51, 48, 82, 94, 77, 51]  
fig=go.Figure()  
fig.add\_trace(go.Scatter(x=x, y=hiT, mode=‘lines’))  
fig.add\_trace(go.Scatter(x=x, y=lowT, fill=‘tonexty’, mode=‘lines’))  
fig.show()

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [January 10, 2023, 10:42am UTC](https://community.plotly.com/t/plotly-graph-object-scatter-plot-fill-color-map/71479/2 "2023-01-10T10:42:09Z")

</div>

Hi @jimy, welcome to the forums.

Unfortunately I don’t think that this is possible. It might be possible to use a surface plot with a color gradient and add the lineplot as trace. This is going to be quite some work.

Abother thing you might do is add a scatterplot to “fill” the area between the two lines in a discrete manner.

---

<div class="post-metadata">

**Author:** ![jimy](https://avatars.discourse-cdn.com/v4/letter/j/bcef8e/32.png) [@jimy](https://community.plotly.com/u/jimy)\
**Post date:** [January 10, 2023, 2:45pm UTC](https://community.plotly.com/t/plotly-graph-object-scatter-plot-fill-color-map/71479/4 "2023-01-10T14:45:12Z")

</div>

Thank you so much for your response. This explains why I could not see anything relevant in my searches.

Yes, your suggestion of having discrete fills is a good idea. Alternatively, I am also thinking that I may be able to plot a rectangle and see if I can fill it with a continuous color map, and then use scatter plots to draw the two lines on top of the rectangle. If this can be done, I can then fill the upper line to the upper edge with white and the lower line to the x axis with white, leaving the color map in the desired band between the two lines displayed. Some quick searches don’t even show this is promising though. I can use add\_shape or hrect etc to draw the rectangle, but filling it with a colormap still seems difficult. I will keep trying and will post my codes if I can get it to work.

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [January 10, 2023, 4:39pm UTC](https://community.plotly.com/t/plotly-graph-object-scatter-plot-fill-color-map/71479/5 "2023-01-10T16:39:38Z")

</div>

Hi @jimy, you could use the px.imshow for the rectangle:

```python
import plotly.express as px
import numpy as np

arr = np.ones(shape=(50, 100))
y = np.arange(1, 51).reshape(50, 1)
arr = np.multiply(arr, y)

fig = px.imshow(arr, color_continuous_scale='bluered', origin='lower')
fig.show()

```

creates:  
 ![newplot(33)](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/9/e/9e9ddf648864708eb1395e4c3cd71e38e7dab17f.png)

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [January 10, 2023, 5:41pm UTC](https://community.plotly.com/t/plotly-graph-object-scatter-plot-fill-color-map/71479/6 "2023-01-10T17:41:39Z")

</div>

OK, I played around a bit, needs some tweaking of the colors, though- and get rid of the rest of the array around the axes.

```python
import plotly.graph_objects as go
import plotly.express as px

# data for overlay
lowT = np.asarray([35, 32, 41, 70, 79, 60, 38])
hiT = np.asarray([48, 51, 48, 82, 94, 77, 51])

# scaling the x- axis with 100
x = np.arange(0, len(lowT)) * 100

# create rectangle
arr = np.ones(shape=(hiT.max(), x.max()))
y = np.arange(1, hiT.max() + 1).reshape(hiT.max(), 1)
arr = np.multiply(arr, y)

# base figure
fig = px.imshow(arr, color_continuous_scale='bluered', origin='lower')

# add traces. fig=go.Figure()
fig.add_trace(
    go.Scatter(
        x=x, 
        y=hiT,
        fill='none', 
        mode='lines', 
        marker=dict(color='white'),
        showlegend=False
    )
)
fig.add_trace(
    go.Scatter(
        x=x, 
        y=[y.max()]*len(hiT),
        fill='tonexty',
        fillcolor='white',
        mode='lines', 
        marker=dict(color='white'),
        showlegend=False
    )
)
fig.add_trace(
    go.Scatter(
        x=x, 
        y=lowT, 
        fill='tozeroy', 
        fillcolor='white',
        mode='lines',
        marker=dict(color='white'),
        showlegend=False
    )
)

fig.update_layout(plot_bgcolor="white")

```

creates:

 ![newplot(34)](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/4/e45039d540e511b187c252e0eae5ed8444736593.png)

---

<div class="post-metadata">

**Author:** ![jimy](https://avatars.discourse-cdn.com/v4/letter/j/bcef8e/32.png) [@jimy](https://community.plotly.com/u/jimy)\
**Post date:** [January 10, 2023, 5:43pm UTC](https://community.plotly.com/t/plotly-graph-object-scatter-plot-fill-color-map/71479/7 "2023-01-10T17:43:59Z")

</div>

Wow, this is great. Thank you so much, @AIMPED

Your idea of having a surface plot is good one too and I am just about to try.

Many thanks again.

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [January 10, 2023, 5:48pm UTC](https://community.plotly.com/t/plotly-graph-object-scatter-plot-fill-color-map/71479/8 "2023-01-10T17:48:23Z")

</div>

The problem still ist that the colors are set to an absolute value, so that around x=400 almost all the surface is red- you might want the colors relative between the min and max temperature lines.

---

<div class="post-metadata">

**Author:** ![jimy](https://avatars.discourse-cdn.com/v4/letter/j/bcef8e/32.png) [@jimy](https://community.plotly.com/u/jimy)\
**Post date:** [January 10, 2023, 5:55pm UTC](https://community.plotly.com/t/plotly-graph-object-scatter-plot-fill-color-map/71479/9 "2023-01-10T17:55:04Z")

</div>

Hi @AIMPED, this is fine, not a big deal. it is already much better than what I can do. My problem now is to put this in a subplot and also create frames so that I can do animation. Not sure if plotly express figure can be easily added to the graph\_object Frame, and plot it inside one of the subplots. I will spend some time myself to play with this. Thanks again for your big help.

---

<div class="post-metadata">

**Author:** ![jimy](https://avatars.discourse-cdn.com/v4/letter/j/bcef8e/32.png) [@jimy](https://community.plotly.com/u/jimy)\
**Post date:** [January 10, 2023, 7:35pm UTC](https://community.plotly.com/t/plotly-graph-object-scatter-plot-fill-color-map/71479/11 "2023-01-10T19:35:45Z")

</div>

@AIMPED Thanks again for your help. Uisng a contour plot and borrowing your codes, I am able to make a plot very similar to what you did above:

```auto
import plotly.graph_objects as go
import numpy as np

# data for overlay
lowT = np.asarray([35, 32, 41, 70, 79, 60, 38])
hiT = np.asarray([48, 51, 48, 82, 94, 77, 51])

# scaling the x- axis with 100
x = np.arange(0, len(lowT)) * 100

# create rectangle
arr = np.ones((100, x.max()))
y = np.arange(1, 101).reshape(100, 1)
arr = np.multiply(arr, y)

fig = go.Figure(data = go.Contour(z=arr, colorscale='bluered', 
                                  contours_coloring='heatmap', line_width=0))

fig.add_trace(
    go.Scatter(
        x=x, 
        y=hiT,
        fill='none', 
        mode='lines', 
        marker=dict(color='white'),
        showlegend=False
    )
)
fig.add_trace(
    go.Scatter(
        x=x, 
        y=[y.max()]*len(hiT),
        fill='tonexty',
        fillcolor='white',
        mode='lines', 
        marker=dict(color='white'),
        showlegend=False
    )
)
fig.add_trace(
    go.Scatter(
        x=x, 
        y=lowT, 
        fill='tozeroy', 
        fillcolor='white',
        mode='lines',
        marker=dict(color='white'),
        showlegend=False
    )
)

fig.update_layout(plot_bgcolor="white")

fig.show()

```

 ![test](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/7/d79e2a4466aff47bd3b4382d02660daf20381a81.png)