Callbacks in Dash

1. Callbacks in Dash

Let's begin making our Dash apps interactive using callbacks.

2. What are callbacks?

In Dash, callbacks are defined as functionality within an app triggered by user interaction. Specifically, a user interacts with an element which triggers a Python function, and this function will cause a change in the app. This creates interactive user experiences.

3. Callbacks in Dash

Let's look at callbacks in Dash. We start with a decorator - an advanced Python feature, but we'll only cover what's relevant for Dash. Inside the decorator, there are two elements. The input and output. The output defines which component will be changed using the returned value of the triggered function. Specifically, the component id property identifies the component to update and the component property defines exactly what will be updated on that component. Here we have some plot with an id of my_plot, and we will be updating the figure attribute. The input is what triggers the callback, similarly identified by the component id property. The component property here is what will be taken from the triggering component to send to the triggered function, placed immediately below the decorator.

4. Dropdowns in Dash

A dropdown in Dash displays a list of options users can choose from. We define it using a list of values.

5. A dropdown callback

Let's walk through a dropdown example that changes a Plotly figure title. We begin with the app layout we are familiar with. Inside, we place our dropdown. Note that the ID, title_dd, is vital to link it to our callback function. We add the graph we wish to change to the app layout. Notice we don't put the figure itself in here, as we have done previously. Now we add the callback. The output will be the figure argument of the graph we just set, linked using the same id; my_graph. The input links to the dropdown we created via the ID, title_dd, and allows us to extract the value associated with the selected option. Below the callback decorator is the function that updates the plot. It runs once on load, so we set a default value. The if statement will be triggered when a user selects the dropdown. Now the work is done. The value of the selection is available as a Python variable, which becomes the title of a bar chart. Finally, the bar chart is returned, which triggers the Output part of the callback and updates the graph component in the layout. Phew!

6. Our first dropdown

Here is our dropdown in action. Notice the default title on load, then it changes with user input. Nice!

7. Dropdown as a filter

A more common use case for dropdowns is to filter the DataFrame that supports a graph. Let's see a coded example for filtering the Country column of our ecom_sales DataFrame. Below the decorator, we have our familiar update function, and we set a default for the first run. Whenever you're filtering in callbacks, it is important to make a copy; otherwise, future subsets won't work. Our if statement now filters the DataFrame to only what the user selected. As before, we create the figure and return it. We also conditionally update the title!

8. The filter in action

We can see the filter subsets the data and updates the graph.

9. Let's practice!

Let's practice adding callbacks to Dash apps to enhance user interactivity.

Create Your Free Account

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