I am using a Plotly JSON chart component that has the uirevision tag on it. I can control this to either use limits I create or keep a zoom state the user creates. This works great within the container it’s in. However, my goal is to be able to switch the tab view of my tabbed container component and then come back and the zoom state remains.
I am assuming based on my testing, the tabbed container causes the chart to unmount and when it remounts, it just defaults back to the original layout that it had.
I noticed in the Plotly chart state, when I zoomed in, none of the ranges changed. Maybe this is why the remount happens and the chart defaults back to that view?
Maybe there is a part of this I am missing or not understanding correctly so I’d love to hear any input from others! Thanks again.
Thanks for your patience - just checking in to see if you still need assistance with persisting the zoom in your Plotly JSON chart when switching tabs in a tabbed container.
I also think that the uirevision tag doesn't persist state - it works by comparing the changes in values within a single mount. When you switch tabs you are unmounting/remounting so the component is fully destroyed and this tag does not have values to compare (and thus does not work to persist the zoom).
For my testing purposes, what type of chart/graph are you building? I will try to reproduce this on my end and see if there's any workarounds!
In the meantime, I am curious if using a custom component is the best option to fully customize with Plotly's plotly_relayout (doc) that is not native to Retool.
@WidleStudioLLP - do you have any additional suggestions for this scenario? Thanks!
I agree with @Jen’s suggestion of using a Custom Component for this use case.
From my experience, Retool’s Plotly JSON Chart component does not currently preserve the zoom state after a refresh or data reload. Additionally, there are no built-in events for zoom in/zoom out that expose the updated x-axis and y-axis ranges, making it difficult to store and restore the zoom state reliably.
A Custom Component provides much more flexibility because you can:
Persist zoom ranges in component state or local storage
Restore the previous zoom level after data refreshes
Implement custom event handlers for zoom, pan, and reset actions
Add your own toolbar controls and interactions
Fully customize the chart behavior and appearance
If maintaining zoom state is a key requirement, a Custom Component is likely the most reliable solution until native support is added to the Plotly JSON Chart component.