Change charts type with radio items in plotly dash

Change charts type with radio items in plotly dash

Change charts types with radio items in plotly dash using an interactive plotly data visualization library and dash web library.

Inputs: Drop down list and radio items

In this dashboard, we can change charts types with radio items in plotly dash. I have used radio items in this plotly dash app to change types of charts. Selecting any radio item, type of chart changes. Drop down list also works with all types of charts. We can select any country name from the drop down list to see data for that selected country on different charts.

See below how this dashboard work?

Layout of drop down list and radio items

Create layout of drop down list and radio items. Use common parameters for these two input components. Type an iterator to get list of countries in drop down list options parameter and type manually label and value for radio items in options parameter. See below code.

Line Chart

Create only one input component of graph in dash app layout. Then use this component as output in the dash app callback. Create the specific data frames for these three charts below the define function. Then type if statement to connect line chart with radio item. See below line 19 in the code template. Use common parameters to create data and layout sections for this type of chart.

Donut Chart

Create data and layout sections of donut chart after the line chart. Use elif statement to display donut chart in the dash app. See below line 1 in the code template. Create donut chart with go.pie property. Only hole property makes difference between pie and donut charts. Insert hole parameter is equal to .7 to create donut chart. See below line 12 in the code template. In values parameter, just use name of data frames to display data on the donut chart from the above code template. See above lines 11 and 12 in the code template.

Change charts type with radio items in plotly dash

Horizontal Bar Chart

Create horizontal bar chart below the donut chart. Type elif statement to connect this chart with radio items. See below line 1 in the code template. In the data section, use top_country data frame to display data on the horizontal bar chart. See above line 15 in the code template.

Change charts type with radio items in plotly dash

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.

One Comment to “Change charts type with radio items in plotly dash”

Comments are closed.