Plotly Dash - syntax error when adding title to figure in dcc.graph

Hi,

This was originally posted at Stack Overload, but decided to post here as no one was able to explain the root cause of this issue.

Just going through the sample tutorial at the Dash website, I tried to modify the sample code and encountered a syntax error when attempting to add a title to the figure within the second dcc.Graph.

The second dcc.Graph is what I created. The code debugger reports that the colon between ‘title’ and 'Test Progress is a syntax error. I checked all the brackets and they all line up properly. Please note that I did not include the complete source code as only the dcc.Graph section was relevant to the error. My guess is that perhaps the wrong type of brackets are being used. But based on the first dcc.Graph, I don’t think that is the case.

dcc.Graph(
            id='example-graph',
            figure={
                'data': [
                    {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                    {'x': [1, 2, 3], 'y': [2, 4, 5], \
                     'type': 'bar', 'name': u'Montréal'},
                ],
                'layout': {
                    'title': 'Dash Data Visualization'
                }
            }
        ),
dcc.Graph(id='plot1', 
                  figure={          
                plotly_figure, 'layout' : {
                    'title': 'Test Progress'
                    }

                }
            )

Additional info: Added the actual data line that pertains to plotly_figure in the dcc.Graph section and the syntax error no longer appears. Can anyone please explain why when referencing ‘plotly_figure’ produces the syntax error.

plotly_figure = dict(data=[dict(x=[1,2,3], y=[2,4,8])])

dcc.Graph(id='plot1', 
                  figure = {          
                          'data': [
                      {dict(data=[dict(x=[1,2,3], y=[2,4,8])])},
                ],
                          'layout' : {
                        'title' : 'Test Progress'
                    }

                }
            )

You are mixing up the {}, when you put {plotly_figure} it create a set, with {‘key’: ‘value’} it create a dictionary. You can’t mix both like you did with:

figure={          
                plotly_figure, 'layout' : {
                    'title': 'Test Progress'
                    }

                }

Thanks for pointing that out. I modified the line of code from the example (https://plot.ly/~jackp/17500/your-first-dash-app/#/) where it was taken from.

I modified the line of code as follows and now it works:
dcc.Graph(id=‘plot1’,
figure = {
’data’: [dict(x=[1,2,3], y=[2,4,8])],
‘layout’ : {
‘title’ : ‘Test Progress’
}

            }
        )

Philippe,

So what would be the correct syntax when declaring plotly_figure outside of dcc.Graph?
plotly_figure = (data = [dict(x=[1,2,3], y=[2,4,8])]) – I tried this but does not work.

The same as you would inside, it’s just a dictionary, data is a list of dictionaries:

fig = {
    'data': [
        {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
        {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
    ],
    'layout': {
        'title': 'Dash Data Visualization'
    }
}

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

Note that you can also use graph_objects from plotly,

from plotly.graph_objs import graph_objs as go

fig = {
    'data': [
        go.Scatter(x=[1, 2, 3], y=[4, 1, 2], type='bar', name='SF'),
    ],
}
1 Like

Thanks again Philippe. I guess have to remember to still think in Python code.