Dash Graph: How to get Click events when dragmode is set to 'drawopenpath'

Dash Python
1

Dear Community,

I ran into the following issue:

I have a dcc.Graph element with a plotly.figure inside it. I have set the dragmode to ‘drawopenpath’ to allow the user to draw free forms on the figure.

However, I also want to capture ClickData events. To do this, I added an Input component with an ‘graph_id’ id and a ‘ClickData’ value to the callback. Unfortunately, the expected click event is not being fired.

I have tried different dragmodes, and it seems that ClickData is not available when the dragmode is a ‘drawingmode’, such as ‘drawopenpath’, ‘drawclosedpath’, or ‘drawline’. Is there a workaround for this issue?

Any Help/Suggestion(s) are appreciated!
All the best,
ivo

2

Hi @ivo,

interesting, I did not know this.

I guess switching manually from 'dragmode': 'drawopenpath' to 'dragmode': 'zoom' using the modebar buttons is not an option.

3

Hej AIMPED

thank you for your suggestion!,

In fact my current workaround is manually switching the 'dragmode': 'drawopenpath' to 'dragmode': 'zoom' upon clicking an extra-button. Following Clicking on the Graph, all the required settings are made, and the dragmode is switched back to 'dragmode': 'drawopenpath'.

Another option would have been to use HoverData (which is working regardless of the dragmode-setting) and to display the required information to the user, such that the user is able to make the desired settings him/her-self. However, I feel this is less convenient and requires more space for displaying the information.

Note: I am still interested why 'dragmode': 'drawopenpath' (and other ‘draw’.modes) is incompatible with ClickData, since no relayout event is fired upon clicking the Graph, either.

4

Another idea: Maybe you could use a keyboard button to activate the dragmode zoom. For example, while ctrl button is pressed, dragmode goes to zoom and clicking is enabled.

BTW:

me too