Zoom-tool-like selection in plots

Hello everyone,

I recently found dash/plotly in a recommendation online. What a great tool! I instantly evaluated if I can use it for my research. In fact, I directly started writing a web app with dash/plotly using Python.

What I have been missing for a long time is an annotation software for biosignals. The user should be able to just drag and select a part of the signal like it is done with an audio file in the following gif (https://prodi.gy/demo → select the audio example):


Being able to delete annotations is not top priority but nice to have. I implemented something similar using the rectangle tool for annotations. Nevertheless, what I am looking for is a tool varying only the x-axis (y-axis is always fully selected as with the zoom tool).

In fact, dash/plotly has a similar functionality, but used for zooming:


Instead of zooming in, I just want start end end point. I can manually add then a box. Do you have an idea how to implement this?



Welcome to Dash @nicop !

There is a built-in selection tool that is already available for you to use:

You can write callbacks that respond to selections via the selectedData property, see https://plotly.com/python/interactive-graphing

In the latest version of Dash 2.6, this selection tool is persistent. Hold down shift to make multiple selections:

1 Like

Hi @chriddyp,

Thank you for that hint; in fact, after looking again into the documentation (Layout in Python), I realized, I can set
fig.update_layout(clickmode=‘event+select’, dragmode=“select”, selectdirection=‘h’)

This gives me exactly the behavior I was looking for :slight_smile: Before, I was struggeling with the box selection because I missed the possibility to set it only to horizontal.

Your link https://plotly.com/python/interactive-graphing is broken (gives me 404), so I could not check what you were sending me. Perhaps, there is also the answer to the following questions:

1.) Do you see an alternative to always holding the shift-key when adding a new selection, e.g., by somehow pretending that shift is always pressed? Otherwise I will implement a workaround.

2.) Is there.a way to prevent the in-snapping when changing a selection (the selection jumps to the previous value if I am too near the old one…)