Black Lives Matter. Please consider donating to Black Girls Code today.

Displaying table in Dash using plotly.graph.objs

I’m having challenges getting a table to display in Dash using plotly.graph_objs. It works outside of Dash.

When I run this code and go to the browser I get “Error loading dependencies”.

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objs as go

app = dash.Dash(__name__)
server=app.server
#server.secret_key = os.environ.get('secret_key', 'secret')

trace1=[go.Table(type = 'table',
    columnorder = [1,2,3],
    columnwidth=[10,30,5],
    header=dict(values=['A Scores', 'B Scores', 'C Scores']),
    cells=dict(values=[[100, 90, 80, 90],
        [95, 85, 75, 95],
        [95, 85, 75, 95]])
    )]

app.layout = html.Div([
    #dcc.Graph( id = "heatmap", figure = go.Figure( data = [go.Heatmap(z=[[1, 20, 30], [20, 1, 60], [30, 60, 1]])] ) ),
    dcc.Graph(id='visitors1',figure = go.Figure(data = trace1))
])

if __name__ == '__main__':
    app.run_server(debug=True)

I’m aware of the figure_factory approach to displaying a table, but I don’t think there is anyway of adjusting column width with that approach.

If I uncomment the heatmap graph and comment the table graph, that does display ok. So it seems to be something with the table that it doesn’t like.
Any advice?

Thanks for reporting! Here’s what I see in the console:

1 Like

It looks like this is a bug in plotly.js 1.31.0. I’ve upgraded the version in dash-core-components to 1.31.2 in this PR: https://github.com/plotly/dash-core-components/pull/125. Once that is merged, your code should work after you upgrade with:

pip install dash-core-components --upgrade

I’ll keep this thread posted when the new release is live (this evening).

Update: this is now live.

2 Likes

Thanks Chris! I tried it this morning after updating the package and it works fine. Thanks again for the quick response.