title: Invalid Callback Return Value When Returning Figure Dict
body: <p>I am trying to return a bar graph, but the columns I use for the bars change based on the drop down value selecting. I am returning a dictionary to the graph.figure output, but am receiving the following error;</p>
  
  <pre><code>dash.exceptions.InvalidCallbackReturnValue:
  The callback for property \figure``
  of component \graph-one` returned a value`    
  which is not JSON serializable.        
  
  In general, Dash properties can only be    
  dash components, strings, dictionaries, numbers, None,    
  or lists of those.
  </code></pre>
  
  <p>My return value is a dictionary though.
  Code below;</p>
  
  <pre><code>def create_grouped_bar(df):
      return [    
          go.Bar(
              x=df['date'],    
              y=df[col],    
              text=df[col],    
              hoverinfo='text+name',    
              name=col.title(),    
              )
          for col in df.columns
          ]    
  
  @app.callback(    
          Output('graph-one', 'figure'),   
          [Input('filtered_df', 'children'),    
          Input('freq-radio', 'value'),    
          Input('graph-one-drop', 'value'),    
          Input('graph-one-radio', 'value')])    
  def update_graph(df_json, freq, cols, amount):    
      dff = pd.read_json(df_json, orient='split')    
      plot_cols = falls_dd_dict[cols]
  
      plot_df = dff[['date_time_occurred']+plot_cols].copy()
  
      plot_df['date_time_occurred'] =           
             pd.to_datetime(plot_df.date_time_occurred)
  
      plot_df['date'] = plot_df['date_time_occurred'].dt.to_period(freq)
  
      plot_df = plot_df.groupby(['date']).count()
  
      if amount != 'all':
          included_cols = plot_df.sum().sort_values(ascending=False)   [:int(amount)].index.tolist()
  
          plot_df = plot_df[included_cols]
  
      bars = create_grouped_bar(plot_df.reset_index())
  
      figure = {'data': bars,
              'layout': go.Layout(    
                  title='Changes in Enrollment',
                  margin={'pad': 3, 'l': 45, 'r': 35, 't': 55, 'b': 25},    
                  barmode='group',    
                  xaxis={    
                  'title': 'Month',    
                  'showgrid': False,    
                  'showline': True,    
                      },   
                  yaxis={    
                  'title': 'Census',          
                  'showgrid': False,    
                      },    
                  legend=dict(orientation="h", y=-0.15)    
                  )        
                  }    
      return figure
  </code></pre>
  
  <p>When I print figure it looks like this;</p>
  
  <pre><code>{'data': [Bar({
  
  'hoverinfo': 'text+name',
  
  'name': 'Date',
  
  'text': array(['2017-12', '2018-01', '2018-02', '2018-03', '2018-04', '2018-05',
  
  '2018-06', '2018-07', '2018-08', '2018-09'], dtype='&lt;U7'),
  
  'x': array([Period('2017-12', 'M'), Period('2018-01', 'M'), Period('2018-02', 'M'),
  
  Period('2018-03', 'M'), Period('2018-04', 'M'), Period('2018-05', 'M'),
  
  Period('2018-06', 'M'), Period('2018-07', 'M'), Period('2018-08', 'M'),
  
  Period('2018-09', 'M')], dtype=object),
  
  'y': array([Period('2017-12', 'M'), Period('2018-01', 'M'), Period('2018-02', 'M'),
  
  Period('2018-03', 'M'), Period('2018-04', 'M'), Period('2018-05', 'M'),
  
  Period('2018-06', 'M'), Period('2018-07', 'M'), Period('2018-08', 'M'),
  
  Period('2018-09', 'M')], dtype=object)
  
  }), Bar({
  
  'hoverinfo': 'text+name',
  
  'name': 'Location',
  
  'text': array(['29', '37', '39', '28', '22', '29', '40', '24', '43', '29'], dtype='&lt;U2'),
  
  'x': array([Period('2017-12', 'M'), Period('2018-01', 'M'), Period('2018-02', 'M'),
  
  Period('2018-03', 'M'), Period('2018-04', 'M'), Period('2018-05', 'M'),
  
  Period('2018-06', 'M'), Period('2018-07', 'M'), Period('2018-08', 'M'),
  
  Period('2018-09', 'M')], dtype=object),
  
  'y': array([29, 37, 39, 28, 22, 29, 40, 24, 43, 29])
  
  }), Bar({
  
  'hoverinfo': 'text+name',
  
  'name': 'Date_Time_Occurred',
  
  'text': array(['29', '37', '39', '28', '22', '29', '40', '24', '43', '29'], dtype='&lt;U2'),
  
  'x': array([Period('2017-12', 'M'), Period('2018-01', 'M'), Period('2018-02', 'M'),
  
  Period('2018-03', 'M'), Period('2018-04', 'M'), Period('2018-05', 'M'),
  
  Period('2018-06', 'M'), Period('2018-07', 'M'), Period('2018-08', 'M'),
  
  Period('2018-09', 'M')], dtype=object),
  
  'y': array([29, 37, 39, 28, 22, 29, 40, 24, 43, 29])
  
  })], 'layout': Layout({
  
  'barmode': 'group',
  
  'legend': {'orientation': 'h', 'y': -0.15},
  
  'margin': {'b': 25, 'l': 45, 'pad': 3, 'r': 35, 't': 55},
  
  'title': 'Changes in Enrollment',
  
  'xaxis': {'showgrid': False, 'showline': True, 'title': 'Month'},
  
  'yaxis': {'showgrid': False, 'title': 'Census'}
  
  })}
  </code></pre>
  
  <p>I've tried pretty much every variation of the plotly api, including;</p>
  
  <p>returning an actual dcc.Graph object as the children to an html.Div, setting up the bars list as a list of trace dictionaries instead of go.Bar() and susing dict(data=bars, layout=layout) instead of the dictionary above.</p>