Between-element interactivity

1. Between-element interactivity

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

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'll cover two common use cases: triggering a change by hovering over a figure, and triggering a change by clicking on a data point.

3. The hoverData property

Let's set up a Dash app to demonstrate how hovering over a figure can trigger an update. For simplicity, assume the app and layout are already defined. We insert a bar chart showing total sales by country. This chart will be the one users hover over to trigger the change. Let's also 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 create a callback. The output is the children property of the paragraph, meaning whatever string is returned will appear on screen. The input looks familiar but slightly different. Previously, we used figures as outputs, but now we're using one as input. Specifically, the input is the hoverData property of the bar chart. This means the callback runs whenever the user hovers over the chart. Inside the function, we return the hoverData, which will be displayed in the paragraph below.

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 that 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.

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.