title: Plotly Dash: How to change image on button click
body: <p>I had unknowingly added in the answer section of the following thread as I was trying to use that example to complete my usecase:</p>
  <p><a href="https://stackoverflow.com/questions/63811550/plotly-how-to-display-graph-after-clicking-a-button/69957171#69957171">Plotly: How to display graph after clicking a button?</a></p>
  <p>I am looking for a very similar solution and I tried suggestion 2 (from the above thread), because I want to display images depending upon user's choice of clicking button. I have <code>image_1</code>, <code>image_2</code>, <code>image_3</code> and <code>image_4</code> under one directory. I have tried so far like below:</p>
  <pre><code>import dash
  import dash_core_components as dcc
  import dash_html_components as html
  import pandas as pd
  import plotly.graph_objs as go
  from dash.dependencies import Input, Output
  import numpy as np
  from plotly.subplots import make_subplots
  import plotly.express as px
  
  pd.options.plotting.backend = &quot;plotly&quot;
  from datetime import datetime
  
  palette = px.colors.qualitative.Plotly
  
  # sample data
  df = pd.DataFrame({'Prices': [1, 10, 7, 5, np.nan, np.nan, np.nan],
                     'Predicted_prices': [np.nan, np.nan, np.nan, 5, 8, 6, 9]})
  
  # app setup
  app = dash.Dash()
  
  # controls
  controls = dcc.Card(
      [dcc.FormGroup(
          [
              dcc.Label(&quot;Options&quot;),
              dcc.RadioItems(id=&quot;display_figure&quot;,
                             options=[{'label': 'None', 'value': 'Nope'},
                                      {'label': 'Figure 1', 'value': 'Figure1'},
                                      {'label': 'Figure 2', 'value': 'Figure2'},
                                      {'label': 'Figure 3', 'value': 'Figure3'}
                                      ],
                             value='Nope',
                             labelStyle={'display': 'inline-block', 'width': '10em', 'line-height': '0.5em'}
                             )
          ],
      ),
          dcc.FormGroup(
              [dcc.Label(&quot;&quot;), ]
          ),
      ],
      body=True,
      style={'font-size': 'large'})
  
  app.layout = dcc.Container(
      [
          html.H1(&quot;Button for predictions&quot;),
          html.Hr(),
          dcc.Row([
              dcc.Col([controls], xs=4),
              dcc.Col([
                  dcc.Row([
                      dcc.Col(dcc.Graph(id=&quot;predictions&quot;)),
                  ])
              ]),
          ]),
          html.Br(),
          dcc.Row([
  
          ]),
      ],
      fluid=True,
  )
  
  
  @app.callback(
      Output(&quot;predictions&quot;, &quot;figure&quot;),
      [Input(&quot;display_figure&quot;, &quot;value&quot;),
  
       ],
  )
  def make_graph(display_figure):
      # main trace
      y = 'Prices'
      y2 = 'Predicted_prices'
      #     print(display_figure)
      if 'Nope' in display_figure:
          fig = go.Figure()
          fig.update_layout(plot_bgcolor='rgba(0,0,0,0)', paper_bgcolor='rgba(0,0,0,0)',
                            yaxis=dict(showgrid=False, zeroline=False, tickfont=dict(color='rgba(0,0,0,0)')),
                            xaxis=dict(showgrid=False, zeroline=False, tickfont=dict(color='rgba(0,0,0,0)')))
          return fig
  
      if 'Figure1' in display_figure:
          fig = go.Figure(go.Scatter(name=y, x=df.index, y=df[y], mode='lines'))
          fig.add_traces(go.Scatter(name=y, x=df.index, y=df[y2], mode='lines'))
          fig.update_layout(template='plotly_dark')
  
      # prediction trace
      if 'Figure2' in display_figure:
          fig = go.Figure((go.Scatter(name=y, x=df.index, y=df[y], mode='lines')))
          fig.add_traces(go.Scatter(name=y, x=df.index, y=df[y2], mode='lines'))
          fig.update_layout(template='seaborn')
  
      if 'Figure3' in display_figure:
          fig = go.Figure((go.Scatter(name=y, x=df.index, y=df[y], mode='lines')))
          fig.add_traces(go.Scatter(name=y, x=df.index, y=df[y2], mode='lines'))
          fig.update_layout(template='plotly_white')
  
      # Aesthetics
      fig.update_layout(margin={'t': 30, 'b': 0, 'r': 0, 'l': 0, 'pad': 0})
      fig.update_layout(hovermode='x')
      fig.update_layout(showlegend=True, legend=dict(x=1, y=0.85))
      fig.update_layout(uirevision='constant')
      fig.update_layout(title=&quot;Prices and predictions&quot;)
  
      return (fig)
  
  
  app.run_server(debug=True)
  </code></pre>
  <p>but I got the following error and couldn't proceed further.</p>
  <pre><code>line 24, in &lt;module&gt;
      controls = dcc.Card(
  AttributeError: module 'dash_core_components' has no attribute 'Card'
  </code></pre>