Bar graph with editable dash table

Solution 1:

If you put a print statement inside your callback of data you will see on initial load the data is as expected

[{'Type': 'Cash', 'Rate': 50, 'id': 'Cash'}, {'Type': 'Credit Card', 'Rate': 50, 'id': 'Credit Card'}]

Rate holds a numeric value.

But when editing values in the datatable the value could be anything so dash table treats your input as a string and not a number.

So after editing a value in the Rate column data could now look like this

[{'Type': 'Cash', 'Rate': 50, 'id': 'Cash'}, {'Type': 'Credit Card', 'Rate': '200', 'id': 'Credit Card'}]

The value I filled in 200 is now a string in data.

It seems that when both Rate values are string values plotly doesn't know how it should draw the bars anymore.

What you could do is to convert the Rate column of df to numeric.

df['Rate'] = pd.to_numeric(df['Rate'])