Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

How to register click and drag events in Dash?

Hi there,

I have recreated this index chart in Dash.

This is a gif of the chart in the link:

The data is dynamically updated by a callback that listens to the hoverData property of the dcc.Graph component when the user hovers the mouse over the graph.

I also added a callback that disables/enables the updates. Right now it is triggered by clicking on the graph area, that is, a change in the clickData property.

However, this doesn’t feel very intuitive to me.
I would like to enable the hover updates when the user holds the left mouse button down and drags the mouse.

How can I implement this functionality?
I wasn’t able to find properties indcc.Graph that store drag events. Do I need to write a custom JS callback or is there a different way?

Thanks in advance