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

How to use graph in dash webpage?

This seems like it should be easy, but I can’t figure it out. How do I put the first chart on this page onto a webpage using dash?

I can get the graph to display on its own using the example code provided, but if I try to insert the figure into an html.Div(fig) or dcc.Graph(fig) it doesn’t work.

Hi @BigSteak4, you can pass a plotly figure as the figure property of a dcc.Graph:

dcc.Graph(figure=fig, id='graph')

where fig is the plotly figure in the tutorial you linked to. The example of uses a dictionary instead of a plotly figure object, but in works exactly in the same way.

Thank you! I saw that article and it just didn’t register. I think I was expecting to see an example (basically the line of code you wrote.)

Yes we should add more documentation about plotly figures in Dash apps :-).

1 Like