Plotly: How to fill the color between two selected lines

Question

I'm creating a dash application to visualize my graph. In my plot, there may be more than 100 lines, and min and max teperature. I need to fill between min and max temperature to set it as range. How to achieve this plotly? I tried tozeroy, tonexty but it fill between the next line or the range starts from 0 to min and 0 to max temperature line. I just shared the code.

 # Add filled area between min and max values
        fig.add_scatter(
            x=daily_data_min_and_max['date'],
            y=daily_data_min_and_max['bearing_de_temperature_min_10m_c'],
            fill='tonexty',
            mode='lines',
            name='Min Temperature',
            hovertemplate='Date: %{x|%Y-%m-%d}<br>Min Bearing Temperature: %{y}',
            line=dict(shape='spline'),
            connectgaps=False,
        )
        fig.add_scatter(
            x=daily_data_min_and_max['date'],
            y=daily_data_min_and_max['bearing_de_temperature_max_10m_c'],
            fill='tonexty',
            mode='lines',
            name='Max Temperature',
            hovertemplate='Date: %{x|%Y-%m-%d}<br>Max Bearing Temperature: %{y}',
            line=dict(shape='spline'),
            connectgaps=False,
        )

        return fig
    except Exception as e:
        print(f"Error updating graph: {str(e)}")
        traceback.print_exc()
        return dash.no_update

when I select the min it starts from zero, and I don't want that. Below image for your reference.

min temperature selected:

When both min and max selected it starts from zero. You can find that in the below image.

Both min and max temperature is selected:

I'm stuck at this. It will be helpful if someone give the approach or the direction to resolve this.

Answer 1

I'm not sure about your case, because the code is not self-contained and cannot test it. But I can provide an example that worked for me

fig = go.Figure(
            data=lines,
            layout=go.Layout(showlegend=False)
)

fig.add_trace(go.Scatter(x=data_price.index, 
                         y=historical_prices, line_color='blue',
                         fill=None, showlegend=False))    
fig.add_trace(go.Scatter(x=forecasted_dates, 
                         y=simulated_q05[:,i], line_color='orange',
                         fill=None, showlegend=False))
fig.add_trace(go.Scatter(x=forecasted_dates, 
                         y=simulated_q95[:,i], line_color='orange', 
                         fill='tonexty', showlegend=False))
fig.add_trace(go.Scatter(x=forecasted_dates, 
                         y=simulated_medians[:,i], line_color='red',
                         showlegend=False))

fig.update_layout(title_text=ticker,xaxis_title="Trading days",yaxis_title="Value (€)",title_x=0.5)

In this case, I wanted to fill in the area between simulated_q05[:,i] and simulated_q95[:,i].

Check this answer too Plotly: How to color the fill between two lines based on a condition?