Bar chart in plotly dash with radio buttons and drop down list

Bar chart in plotly dash with radio buttons and drop down list

Create bar chart in plotly dash with radio buttons and drop down list using plotly interactive data visualization and dash library.

Inputs: Radio items and drop down list (chained callbacks)

This dash app is fully dynamic and it is responsive on any device. There are two input components in this dash app. Drop down list depends on radio items. By selecting any radio item, data in the drop down list is updated according to the value of radio item. Bar chart also depends on these two input components. By changing values in an input components, the data is updated on the bar chart.

See below how this dashboard work?

Radio items and drop down list

Let’s start to create this dash app. First of all, create the layout of radio items inside the dash app layout and retrieve all options in the app. You can see below in line 5 in the code template. Then create drop down list and leave blank list of options parameter. See below line 14 in the code template.

Chained callbacks

Create chained callbacks to make dynamic these two input components. Create first callbacks to retrieve list of options in the drop down list from the radio items component. You can see below from lines 1 to 6 in the code template. After that, create second callbacks to select default value of any radio items component in the drop down list. See below code from lines 8 to 12.

Bar chart

Define function to make dynamic bar chart. Create data frame named election3 to change values on bar chart when input is changed from the input components. See below code in the line 6. Use this data frame named election3 in the data section of bar and use columns from the data frame named election2. See lines 12 and 13. Use text template parameter to show values on bar. In marker parameter, use column values for creating different color schemes for each bar. Other parameters can be viewed below in the code template.

Download the full code and CSV data file and learn more about plotly dash on Udemy.


If you have any problem in learning above code, please comment in the comment box. I will help you as soon as possible.


Recommended For You

About the Author: Mubeen Ali

I am passionate about learning Dash. Dash is a python framework that creates beautiful web based data visualization dashboards.