Displaying table in Dash using plotly.graph.objs

Dash Python
1

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?

2

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

image
image.png835×605 300 KB

1 Like
3

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
4

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