Get startedGet started for free

Between-element interactivity

1. Between-element interactivity

Let's learn how to trigger changes in one element by hovering over or clicking on another element.

2. What is between-element?

What do we mean by between-element interactivity? In previously constructed apps, when a user interacted with an input component, such as a dropdown, a callback was triggered, which changed a figure. Now, we will learn how interacting with one figure can trigger a callback to change another. We will cover two common use cases. We will see how to hover over one figure, or click on a datapoint, and cause another figure to be filtered and regenerated using a callback.

3. The hoverData property

Let's set up a Dash app to demonstrate how hovering on a figure can be used to trigger a change. For simplicity, assume the Dash app and layout has been set above. We insert a bar chart, total sales by country. It will be this figure that we will hover over to trigger the change. Let's set up an HTML-dot-P tag. This is a paragraph tag for rendering text. We can send data to this tag to see exactly what data is produced on a hover. To do this, we need a callback. The output is the children property of the P tag, so whatever string we send back will appear visually. The input seems familiar but different. We have previously had figures as an output, not input. This input is saying the callback will be triggered when the hoverData property of our bar figure changes. We will then define a function to return the entire hoverData property, which will appear on screen in the P tag text.

4. Our first hover

Let's see what happens visually. The hover data starts at None as nothing has been hovered over yet. When the user hovers, the hoverData property of that figure changes. Our callback takes all this information and returns it to the P tag below. We can see when hovering over Australia, there is information related to that data point. Now I am sure we can imagine a useful way to use that information. Just like we have done before, we can use that information to filter and regenerate a figure.

5. Beware missing info

Let's see what happens when we use another graph type. Our aim here is to use the country a user hovers over in the callback to filter and regenerate the graph. In the previous example, the country was available in the hoverData property of the figure. Let's instead use a scatter plot. We won't show the code, as only the plot type and IDs have been updated. Oh no, there is no country in the hoverData!

6. Adding custom data

Fear not; there is a quick fix to this problem. For Plotly figures, we can add extra information from our DataFrame to the plot using the custom_data property. We do that here. Now let's see what happens. Excellent. There is a customData field in our hoverData that contains the information we want.

7. What about clicking?

Dash also allows apps to trigger a callback when a point is clicked. There is only one change required to our code to take advantage of this. We must use the clickData property in our callback instead of hoverData. Notice this is similar to before, but nothing happened on hover; we had to click the bar for the callback to trigger and the text to change.

8. Let's practice!

Let's practice using hover and click interactivity to enhance our Dash apps.