Invalid Callback Return Value When Returning Figure Dictionary to dcc.Graph

Dash Python
1

Hello,

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;

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 below;

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()
    plot_df.to_csv('plotdf.csv')

    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

When I print figure it looks like this;

{'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='<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='<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='<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'}
})}