title: Plotly Dash Callback error updating Output Graph
body: <p>I am trying to create an interactive chart using Plotly Dash. The code reads the symbol name from the user and pullout historical data from yahoo finance and plots a candlestick chart with an slider. As I run the code I am getting this error in the browser:</p>
  
  <pre><code>Callback error updating output-graph.children
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/d7HEi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d7HEi.png" alt="enter image description here"></a></p>
  
  <p>The source code is:</p>
  
  <pre><code>import dash
  import dash_core_components as dcc
  import dash_html_components as html
  from dash.dependencies import Input, Output
  import plotly.graph_objs as go
  import pandas_datareader.data as web
  import pandas as pd
  from app import app
  import datetime
  
  
  app = dash.Dash()
  
  app.layout = html.Div(children=[
          html.H1('Interactive Chart'),
          dcc.Input(id='input', value='', type='text'),
          html.Div(id='output-graph')
          ])
  
  @app.callback(
          Output(component_id='output-graph', component_property = 'children'),
          [Input(component_id='input', component_property = 'value')])
  
  def update_graph(input_data):
  
      start = datetime.datetime(2018, 6, 1)
      end = datetime.datetime.now()
      df = web.DataReader(input_data, 'yahoo', start, end)
      df['year'] = pd.DatetimeIndex(df.index).year
      df['date'] = pd.DatetimeIndex(df.index)
  
      return dcc.Graph(id='example-graph',figure ={'data':[go.Candlestick(x=df['date'],open=df['Open'],high=df['High'],low=df['Low'],close=df['Close'],
                                                                          increasing={'line': {'color': 'green'}},decreasing={'line': {'color': 'red'}})],
                                                  'layout':{'title': str.upper(input_data), 
                                                            'height': 1000,
                                                            "spikedistance": 200,
                                                            "hoverdistance": 100,
                                                            "xaxis": {
                                                                    "showspikes": 'true',
                                                                    "spikemode": "across",
                                                                    "spikedash": "dash",
                                                                    "spikecolor": "#000000",
                                                                    "spikethickness": 1},
                                                             "yaxis": {
                                                                    "showspikes": 'true',
                                                                    "spikemode": 'across',
                                                                    "spikedash": "dash",
                                                                    "spikecolor": "#000000",
                                                                    "spikethickness": 1
                                                                    }}})
  
  
  if __name__ == '__main__':
      app.run_server(debug=True)
  </code></pre>
  
  <p>I don't know where in the callback I am making mistake. </p>