title: Dash / Plotly bar chart shows two bars on top of each other, effectively displaying twice the real value
body: <p>I have a problem with the dash app. From 2018 onwards it shows two bars stacked on top of each other (showing 110 visually). The value when hovering, however, is still the correct one ( around 55 and decreasing). </p>
  
  <p><strong>You can find the code on the bottom.</strong></p>
  
  <p>Also, when I plot with matplotlib.pyplot the graph shows correctly. </p>
  
  <p>In addition, the fine line between the bars (around a value of 55) shows the correct value. This is where the second bar is stacked.</p>
  
  <p>Does anyone have an idea how to tackle this problem or knows how to solve this? 
  The stacked bar should disappear so that the correct value of around 55 is displayed.</p>
  
  <p><a href="https://i.stack.imgur.com/IXkOn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IXkOn.png" alt="Graph with double values from 2018 onwards, enlarged"></a>
  <a href="https://i.stack.imgur.com/hWFyM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hWFyM.png" alt="Graph with double values from 2018 onwards"></a>
  <a href="https://i.stack.imgur.com/McUPC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/McUPC.png" alt="Pyplot graph for comparison"></a></p>
  
  <pre class="lang-py prettyprint-override"><code>
  import sys
  sys.path.insert(1, 'path')
  import pandas as pandas
  import matplotlib.pyplot as plt
  import dash
  import dash_core_components as dcc
  import dash_html_components as html
  import plotly.graph_objs as go
  from dash.dependencies import Input, Output
  import forex_factory_calendar_scraper as ffcs
  import economic_calendar_reader as ecr 
  import time
  
  
  #  Fuctions for RangeSlider. Dash does not support DateTime objects
  def unixTimeMillis(dt):
      ''' Convert datetime to unix timestamp '''
      return int(time.mktime(dt.timetuple()))
  
  def unixToDatetime(unix):
      ''' Convert unix timestamp to datetime. '''
      return pd.to_datetime(unix,unit='s')
  
  def getMarks(start, end, daterange, Nth=50000):
      ''' Returns the marks for labeling. 
          Every Nth value will be used.
      '''
      result = {}
      for i, date in enumerate(daterange):
          if(i%Nth == 1):
              # Append value to dict
              result[unixTimeMillis(date)] = str(date.strftime('%Y-%m-%d'))
      return result
  
  
  
  app = dash.Dash(__name__)
  
  #  Importing data
  ffcs.get_economic_calendar("calendar.php?month=dec.2019","calendar.php?month=dec.2019")
  calendar = ecr.read_economic_calendar()
  
  #calendar = calendar.loc[calendar.Currency == 'EUR']
  available_currencies = calendar.Currency.unique()
  
  app.layout = html.Div([
      html.Div([
  
          html.Div([
              dcc.Dropdown(
                  id='currency1',
                  options=[{'label': i, 'value': i} for i in available_currencies],
                  value='EUR'
              )
          ],
          style={'width': '48%', 'display': 'inline-block'}),
  
          html.Div([
              dcc.Dropdown(
                  id='currency2',
                  options=[{'label': i, 'value': i} for i in available_currencies],
                  value='USD'
              )
          ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),
  
          html.Div([
              dcc.Dropdown(
                  id='events1',
  
              )
          ],
          style={'width': '48%', 'display': 'inline-block'}),
  
          html.Div([
              dcc.Dropdown(
                  id='events2',
  
              )
          ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),
  
          html.Div([
              dcc.RadioItems(
                  id='disp_col1',
                  options=[
                  {'label': 'Actual', 'value':'Actual'},
                  {'label': 'Surprise %', 'value':'Surprise_Pct'}
                  ],
                  value='Actual'
              )
          ],
          style={'width': '48%', 'display': 'inline-block'}),
  
          html.Div([
              dcc.RadioItems(
                  id='disp_col2',
                  options=[
                  {'label': 'Actual', 'value':'Actual'},
                  {'label': 'Surprise %', 'value':'Surprise_Pct'}
                  ],
                  value='Actual'
              )
          ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),
      ]),
      html.Div([
          dcc.Graph(id='surprice_pct-ts1'),
      ],style={'width': '48%', 'display': 'inline-block'}),
  
      html.Div([
          dcc.Graph(id='surprice_pct-ts2'),
      ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),
  
      html.Div([
          html.Div([
              dcc.RangeSlider(
                  id='year_slider',
                  min = unixTimeMillis(calendar.Date.min()),
                  max = unixTimeMillis(calendar.Date.max()),
                  value = [unixTimeMillis(calendar.Date.min()),
                           unixTimeMillis(calendar.Date.max())]
                  #marks=getMarks(calendar.Date.min(),
                  #            calendar.Date.max(), calendar.Date)
              )
          ],style={'width': '70%', 'display': 'inline-block'})
      ],style={'width': '100%', 'text-align': 'center'})
  ])
  
  #   Left Graph -------------------------------------------------------------&gt;&gt;
  @app.callback(
       dash.dependencies.Output('surprice_pct-ts1', 'figure'),
      [dash.dependencies.Input('currency1', 'value'),
       dash.dependencies.Input('events1', 'value'),
       dash.dependencies.Input('disp_col1', 'value'),
       dash.dependencies.Input('year_slider', 'value')])
  
  def update_ts1(currency1,events1, disp_col1, year_slider):
  
      output = calendar[calendar.Currency == currency1]
      output = output[output.Event == events1]
  
  
      data = []
      trace_data = go.Bar(x=list(output.Date),
                          y=list(output[disp_col1]))
  
      data.append(trace_data)
      layout = {'title':'Economic Indicators - {} - {}'.format(currency1,disp_col1)}
  
      return {
          'data':data,
          'layout': layout
      }
  
  @app.callback(
      dash.dependencies.Output('events1', 'options'),
      [dash.dependencies.Input('currency1', 'value')])
  def update_evets1(currency1):
      output = calendar[calendar.Currency == currency1]
      available_events1 = output.Event.unique()
      return [{'label': i, 'value': i} for i in available_events1]
  
  @app.callback(
      dash.dependencies.Output('events1', 'value'),
      [dash.dependencies.Input('currency1', 'value')])
  def update_evets1(currency1):
      output = calendar[calendar.Currency == currency1]
      available_events1 = output.Event.unique()
      return available_events1[0]
  
  
  #   Right Graph -------------------------------------------------------------&gt;&gt;
  @app.callback(
       dash.dependencies.Output('surprice_pct-ts2', 'figure'),
      [dash.dependencies.Input('currency2', 'value'),
       dash.dependencies.Input('events2', 'value'),
       dash.dependencies.Input('disp_col2', 'value'),
       dash.dependencies.Input('year_slider', 'value')])
  
  def update_ts1(currency2,events2, disp_col2, year_slider):
  
      output = calendar[calendar.Currency == currency2]
      output = output[output.Event == events2]
  
  
      data = []
      trace_data = go.Bar(x=list(output.Date),
                          y=list(output[disp_col2]))
  
      data.append(trace_data)
      layout = {'title':'Economic Indicators - {} - {}'.format(currency2,disp_col2)}
  
      return {
          'data':data,
          'layout': layout
      }
  
  @app.callback(
      dash.dependencies.Output('events2', 'options'),
      [dash.dependencies.Input('currency2', 'value')])
  def update_evets1(currency2):
      output = calendar[calendar.Currency == currency2]
      available_events2 = output.Event.unique()
      return [{'label': i, 'value': i} for i in available_events2]
  
  @app.callback(
      dash.dependencies.Output('events2', 'value'),
      [dash.dependencies.Input('currency2', 'value')])
  def update_evets1(currency2):
      output = calendar[calendar.Currency == currency2]
      available_events2 = output.Event.unique()
      return available_events2[0]
  
  if __name__ == '__main__':
      app.run_server(debug=True)
  
  </code></pre>