Mastering Plotly and Dash Data Visualization with Python/

...

/

Chaining Callbacks

Chaining Callbacks

Learn how to chain callbacks, where one callback result triggers another callback without further direct user influence.

We'll cover the following...

Chained callbacks

As the name suggests, a chained callback is a technique used to bind/link/chain callback functions together, in which we use the output of a particular callback function as the input to a successive callback function. Perhaps the best example of a chained callback could be in the implementation of a conditional dropdown menu.

In a conditional dropdown for an online store, we might want the user to be able to select either Sunglasses, T-shirts or Hats. Suppose they choose Sunglasses: From this point onward, we’d like to only show different sunglasses sub-categories (e.g., “Ray Ban Sunglasses,” “Oakley Sunglasses,” etc.). It would be a nuisance to the user to still show every sub-category for T-shirts and Hats as they never asked for those categories.

A simple example

Here’s a simple example of how to chain callbacks in Dash:

  1. Setup and layout: Import the necessary libraries, initialize the Dash app, and create the layout that includes two dropdown Dash Components and a display component.

Let’s look at the code in depth:

  • Lines 1–4: Import necessary libraries: Dash, Dash Core Components (dcc), Dash HTML Components (html), and input and output dependencies.

  • Line 7: Create a Dash app instance.

  • Lines 10–24: Define the app layout containing three components:

    • Lines 11–18: A dcc.Dropdown component with id='category-dropdown' that allows users to select a category from a list of options (sunglasses, t-shirts, hats). The default value is set to sunglasses.
    • Line 19: A dcc.Dropdown component with
...