Trigger callback on image click

I have multiple images in my dashboard. Each image belongs to an entity, I want to update a single graph based on the image clicked.

I am using html.Img for displaying the image and dcc.graph for showing the graph.

Hi @ninja

You could try using the n_clicks property in html.Img as an input in a callback to update the graph

Yeah I was looking at that just now.

One thing that bothers me though is the following:
I have multiple images, and I want different actions to be performed based on which image is clicked i.e. is there a way to create a single callback function that would behave differently for each image clicked.

Let’s say I have 3 images and each image has a graph associated with it. When image 1 is clicked, I want to show graph of image 1, similarly when image 2 is clicked I want to show graph of image 2 and so on.

Yes, you could create a single callback that returns different graphs depending on which image was clicked. Alternatively you could use the MultiplexerTransform and create one callback per image.

1 Like

Yes you can use @Emil’s awesome new MultiplexerTransform, and here is another method:

See the example called “Determining which Input has fired” on this page of the docs: Advanced Callbacks | Dash for Python Documentation | Plotly

1 Like

@Emil @AnnMarieW

Thankyou for the reply. Both answers have helped me getting closer to my goal.

There’s one thing that’s bothering me. The solutions you mentioned both require inputs to be mentioned before hand. Is there a way to do this dynamically. The problem I have is that I don’t have a fixed set of images.

Think of this as table rows, each row has 3 images, but the number of rows is variable. I want a system that handles clicks on all the images.


Pattern-Matching Callbacks | Dash for Python Documentation | Plotly might work for you.

1 Like