Black Lives Matter. Please consider donating to Black Girls Code today.

Add cursors for measurment

Hi, I am searching for a solution to integrate the functionality to add cursors to the plot and measure the difference. Like in an digital oscilloscope. The spike lines are the right way, but it is not possible to fix them. Any ideas?

I working on something similar with the cursors (haven’t finished it yet). I’m doing it in Python/Dash, but the idea should be the same.

I’m planning on using a slider or rangeslider element to control the cursors. The slider element doesn’t fit the xaxis pefectly, but I found controlling the CSS to match the plot will scale it.

edit: I forgot to add that you can use the range slider return value to draw a vertical line on the screen.

One trick seems to be that you can’t use datetime formats in the sliders. So you’ll have to convert to/from numerical values.

But I’m also curious if someone has found a better way of doing it.

edit2: Ok I can officially say that’s a bad way to do it haha. It works but is too slow. A similar idea would probably work, but I guess would need to be written in D3 or whatever directly, and not using the plotly api.

My second attempt will be to use the select data callback in Dash. This let’s you click a point, and bring back all plot data related to that point. I’m not sure if plotting a cursor to the screen will work well this way, but we’ll see.