Exploring Additional Features of Drop-Downs

The Dropdown component has an optional parameter, multi, that takes a boolean argument, which we can set to True to allow this.

dcc.Dropdown(id='gini_country_dropdown',
multi=True,
options=[{'label': country, 'value': country}
    for country in gini_df['Country Name'].unique()]),

We can now make the changes and use the Gini country bar chart for as many countries as we like. The height of that figure on the page dynamically expands/collapses based on the dynamic height that we set, so we also don’t need to worry about this aspect of the layout. The users will manage it themselves while interacting with the components.

Let’s now see whether it’s easy for a newcomer to use those options.

Adding placeholder text to drop-downs

If we look at the Gini index section of the app for the first time, we will see two drop-downs that allow us to make a selection, as shown in the illustration below:

But select what exactly?

The Dropdown component has an optional placeholder parameter, which can be very useful for users to know what exactly they are selecting. We can easily update our placeholder text for both Dropdown components to make it clearer to users.

placeholder="Select a year"
placeholder="Select one or more countries"

We can make it even more explicit by using the Label component from Dash Bootstrap Components, which, as the name suggests, provides a label. These labels can be placed above the ...