'how to update existing plot's axis range using slider without re-calculation

I am using plotly-dash.

I use read_csv to read a big file and do some calculation. After calculation, I created a heatmap and some line plots.

Now I'd like to change heatmap's colorbar range and line plot's y axis range as well using slider.

I don't want to read csv and do calculation again to generate the plots using new axis range. How do I just update existing plot's axis range?

I am thinking to create a callback, get the figure from the graph, then use fig.update_yaxis(), then return figure to same graph.

This way both input and output has same graph's figure which is not allowed. any suggestion or other way to do it?

Thanks

@app.callback(
[
 Output("line-graph", "figure"),
]
[
 Input("line-graph", "figure"),
 Input("lineplot-range-slider-items", "value"),
]

def update_fig_axis_range(fig,axis_range_slider):

    
    fig.update_xaxes(title_text='name',title_font = {"size": 20},tickfont=dict(size=16),
                     autorange=False,range=axis_range_slider,row=2,col=1)

    return fig

This is the slider.

dcc.RangeSlider(min=min_y,max=max_y,step=step_y,dots=True,included=True,
               marks={int(x) if x % 1 == 0 else x :{'label':'{:.0f}'.format(x),'style':{'color':'blue'}} 
                     for x in np.arange(min_y,max_y,step_y)},
               value=[100,250], 
               id="lineplot-range-slider-items",
               tooltip={"placement": "bottom", "always_visible": True},
                  )

I found a link where we can add data into graph's extendData

https://community.plotly.com/t/what-is-a-correct-usage-of-extenddata-property-to-achieve-adding-data-to-existing-graph-instead-of-constantly-updating-it/39569/3

Now I am wondering if I can use output('line-graph','layout') to just update its layout properties like the way update extendData. Thanks



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source