title: How to Configure Callbacks to Cards in Plotly Dash App
body: <p>I'm working on creating a Python-based COVID19 dashboard with Plotly Dash.  I want to have some cards near the top of the page displaying population/case/death KPIs that update based on the selection of a dropdown menu.  I'm a little confused on how to configure the callback section to make the cards reactive.</p>
  <p>Here is my code so far:</p>
  <pre><code>#Import packages
  import pandas as pd
  import numpy as np
  import matplotlib.pyplot as plt
  import plotly.express as px
  import plotly.graph_objs as go
  import dash
  import dash_core_components as dcc
  import dash_html_components as html
  import dash_bootstrap_components as dbc
  from dash.dependencies import Input, Output
  
  #Read in data and manipulate
  who_data = pd.read_csv(&quot;https://covid19.who.int/WHO-COVID-19-global-data.csv&quot;)
  pops = pd.read_csv(&quot;https://gist.githubusercontent.com/curran/0ac4077c7fc6390f5dd33bf5c06cb5ff/raw/605c54080c7a93a417a3cea93fd52e7550e76500/UN_Population_2019.csv&quot;)
  
  pops = pops[['Country','2020']]
  pops['2020'] = pops['2020']*1000
  
  who_data.rename(columns={'New_cases': 'New Cases', 'Cumulative_cases': 'Cumulative Cases', 'New_deaths': 'New Deaths','Cumulative_deaths': 'Cumulative Deaths'}, inplace=True)
  
  country_choices=who_data['Country'].unique()
  metric_choices=who_data.columns[4:]
  
  #Initialize graph
  fig = px.line(who_data, x=&quot;Date_reported&quot;, y=&quot;New Cases&quot;)
  
  #Define cards
  card1 = dbc.Card([
      dbc.CardBody([
          html.H4(&quot;Card title&quot;, className=&quot;card-title&quot;,id=&quot;card_num1&quot;),
          html.P(&quot;Current Population&quot;, className=&quot;card-text&quot;,id=&quot;card_text1&quot;)
      ])
  ],
      style={'display': 'inline-block',
             'width': '33.3%',
             'text-align': 'center',
             'color':'white',
             'background-color': 'rgba(37, 150, 190)'},
      outline=True)
  
  card2 = dbc.Card([
      dbc.CardBody([
          html.H4(&quot;Card title&quot;, className=&quot;card-title&quot;,id=&quot;card_num2&quot;),
          html.P(&quot;This is some card text&quot;, className=&quot;card-text&quot;,id=&quot;card_text2&quot;)
          ]
       )],
      style={'display': 'inline-block',
             'width': '33.3%',
             'text-align': 'center',
             'color':'white',
             'background-color': 'rgba(37, 150, 190)'},
      outline=True)
  
  card3 = dbc.Card([
      dbc.CardBody([
          html.H4(&quot;Card title&quot;, className=&quot;card-title&quot;,id=&quot;card_num3&quot;),
          html.P(&quot;This is some card text&quot;, className=&quot;card-text&quot;,id=&quot;card_text3&quot;)
          ]
       )],
      style={'display': 'inline-block',
             'width': '33.3%',
             'text-align': 'center',
             'color':'white',
             'background-color': 'rgba(37, 150, 190)'},
      outline=True)
  
  #Define app layout
  app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
  app.layout = html.Div([
      dcc.Tabs([
          dcc.Tab(label='Country', value='tab-1', style=tab_style, selected_style=tab_selected_style,
                  children=[
              html.Div([
                  dcc.Dropdown(
                      id='dropdown1',
                      options=[{'label': i, 'value': i} for i in country_choices],
                      value=country_choices[0]
                  )
              ],style={'width': '50%',
                       'display': 'inline-block',
                       'text-align': 'center'}
              ),
              html.Div([
                  dcc.Dropdown(
                      id='dropdown2',
                      options=[{'label': i, 'value': i} for i in metric_choices],
                      value=metric_choices[0]
                  )],style={'width': '50%',
                            'display': 'inline-block',
                            'text-align': 'center'}
              ),
              html.Div([
                  card1,
                  card2,
                  card3
              ]),
              html.Div([
                  dcc.Graph(figure=fig, id='country_plot')
              ])
          ]),
          dcc.Tab(label='Spread', value='tab-2', style=tab_style, selected_style=tab_selected_style,
                  children=[
               html.P('Some stuff will go here eventually.') 
  
          ])
  ])
  ])
  
  
  
  # @app.callback(
  #     Output('card_num1','children'),
  #     Output('card_num2','children'),
  #     Output('card_num3','children'),
  #     Output('card_text1','children'),
  #     Output('card_text2','children'),
  #     Output('card_text3','children'),
  #     Input('dropdown1','value')
  # )
  
  # def update_cards(country_select):
  #     new_df = who_data[(who_data.Country==country_select)]
  #     c_pop = pops[pops.Country==country_select]['2020'].unique()[0]
      
  #     card1 = dbc.Card([
  #         dbc.CardBody([
  #             html.H4(c_pop, className=&quot;card-title&quot;,id=&quot;card_num1&quot;),
  #             html.P(f&quot;Current Population of {country_select}&quot;, className=&quot;card-text&quot;)
  #         ])
  #     ],
  #     style={'display': 'inline-block',
  #            'width': '33.3%',
  #            'text-align': 'center',
  #            'background-color': 'rgba(37, 150, 190)'},
  #     outline=True)
  
  
  
  
  @app.callback(
      Output('country_plot','figure'),
      Input('dropdown1','value'),
      Input('dropdown2','value'))
  
  def update_figure(country_select,metric_select):
          new_df = who_data[(who_data.Country==country_select)]
          country_df = pops[pops.Country==country_select]
  
          fig = px.line(new_df, x=&quot;Date_reported&quot;, y=metric_select,
                        title=f'&lt;b&gt;{metric_select} of COVID19 for {country_select}&lt;/b&gt;',
                        color_discrete_sequence = [&quot;red&quot;],
                        labels=dict(Date_reported=&quot;Date&quot;)
                       )
          fig.update_traces(mode='markers+lines',marker=dict(color=&quot;black&quot;,size=3),line=dict(width=2))
          fig.update_layout(title={'x':0.5,
                                   'xanchor': 'center',
                                   'yanchor': 'top'})
      
          return fig
  
  app.run_server(host='0.0.0.0',port='8050') 
  </code></pre>
  <p>I commented out the <code>@app.callback</code> section I'm confused on.  Not sure how to proceed and haven't been able to find any examples online that do this.  Or at least any that made their code available.</p>
  <p>Can someone help point me in the right direction?  Any help would be appreciated!  Thank you!</p>