How do I capture a zoom event for plotly components?

💬 App Building
, ,
1

Hey team! Looking for the ability to be able to capture a zoom event on a plotly chart in hopes I can preserve the zoom on a rerender.

I have a chart in which the user can pick a start date down to the fractional second. When the user picks a new time, the chart is rendered again to move the vertical line indicating the start time. However, since it was rendered again, the original zoom lost.

I have searched through these forums and saw that a lot of the zoom events aren’t exposed, but just hoping to see if there was a workaround or something that I am missing.

1 Like
4

Hi @Kevin_Eslick,

Exactly which component are you using? A screenshot would be very helpful as well.

I was looking at the Event Handlers and it seems we do not expose a 'zoom' option, but I can definitely make a feature request to have a click+zoom event handler to then bind to events.

5

Hey Jack, thanks for the reply. I am using the Chart component but using the Plotly JSON options to dynamically pass my chart data in. Having the zoom events exposed would be great for my situation.

My usage would be a user can zoom in, select a specific date, this chart updates a line on the chart, but instead of having to do a full re render which causes the zoom to reset, I would be able to ‘save’ whatever zoom is currently in use and reuse it on the re render.

image
image401×952 34.1 KB

1 Like
6

Hey @Kevin_Eslick

Yes, you can do this without manually saving the zoom.

Since you're using the Chart component with Plotly JSON, just add the uirevision property to your layout. That tells Plotly to keep the current zoom and UI state when the chart updates.

Add this to your layout:

{
  "uirevision": "keep-zoom"
}

As long as "keep-zoom" doesn’t change between renders, Plotly will preserve:

  • Zoom level
  • Axis range
  • Pan position
  • Legend state

Also, make sure Zoom isn’t disabled:

"xaxis": { "fixedrange": false },
"yaxis": { "fixedrange": false }

That’s it — now when the user zooms in and you update the chart (like adding a vertical line), the zoom will stay exactly where it was.

When you double-click the chart, it resets back to its original zoom level.

Here’s a sample setup for reference:

Widle

Feel free to ask if you need further assistance or have additional questions. We're here to help!

2 Likes
7

Hi @Kevin_Eslick,

Let me know if @WidleStudioLLP's example works for your use case!

1 Like