Updating chart data without affecting zoom

We build all of our charts dynamically based on user choices. I’m trying to allow users to change the data loaded into the chart and rebuild the chart traces (the data), legend, and overall axis ranges, but leave their pan position or zoom level unchanged. (E.g. if they’re zoomed into an area, leave it zoomed into that area). I’ve tried a few approaches:

  • Rebuild the trace configs, and just call deleteTraces() and then addTraces() with the new traces
  • Using Plotly.update(). However, I seem to get different results depending on how I use it (passing in brand new trace and layout objects, vs. using the existing trace and layout objects but overwriting their properties). Sometimes it’ll rescale the charts anyway, sometimes it’ll keep the zoom level if the ranges are bigger or smaller than they originally were, etc.

If there isn’t an obvious way to do this “automatically”, then is there a way to interrogate the chart to get the pan position (current chart center?) and zoom level, and manually re-apply it after the update?

1 Like

Hey, Brian. I’m stuck trying to do the exact same thing. I’m working with two 3D surfaces, updating one or both of the surfaces and trying to redraw it. The update command doesn’t seem to change anything. The deleteTraces works, but I get errors when I try to addTrace containing the new data. I read about a “redraw” command (https://stackoverflow.com/questions/32116368/plotly-update-data), but that doesn’t seem to update the chart, and It is a little strange that the command doesnt seem to be in the API reference.
Wish I could be more helpful, but if you find a workable solution, please let me know!

He guys,

Did you ever find a solution to this problem? im trying to do the same thing

Hi guys! I’m having the same issue. Right now I’m trying to work around using slicers, but for the moment I’m not successful. Did you solved it?

The only way I could get it to work is to go into the DOM element _fullLayout to get the current ranges, then update the traces, set the new ranges to match the previous _fullLayout ranges, and then run Plotly.react().

Hi,

I came across this whiling trying to fix the same issue.

What worked for me was using the uirevision attribute in layout: Uirevision in plotly.react in JavaScript

1 Like