Unable to position dcc.Markdown on a column with a dcc.Graph

I am in the finishing stages of my first real Plotly Dash dashboard. I have run into a problem where I can’t add dcc.Markdown to any dcc.Graph elements.

It works fine with the dash.DataTable, as shown in the image below.

I am using Python v3.10, Dash v 2.6.2 & Plotly 5.10.

I have circled in red on the image above where my dcc.Markdown appears above a dcc. DashTable. I would like to do the same with the charts. I have placed red squiggles on the image where id like to place them.

No matter what I do I cannot get Markdown to work in a column with a chart.

Here is the code that works in a Row/Column with Markdown and a DataTable (yes I haven’t closed it off but you get the idea.

dbc.Row(
        # Dash Data Table
        [dbc.Col(
            [dcc.Markdown('### Top Risks ###'),
            dash_table.DataTable(
                id='table1',
                columns=[
                    {'name': 'Risk ID', 'id': 'risk_id', 'type': 'text', 'editable': False},
                    ...
                   ...

If I try the same but with a dcc.Graph

dbc.Col(
                [dcc.Markdown('### Risk Breakdown ###'),
                dcc.Graph(id='sun_burst1', figure={}, style={'height': '45vh'}),
                width=4, lg={'size': 5, "offset": 0, 'order': 'second'}
                   ]),

This generates an error and all the code is underlined in red in PyCharm.

TypeError: The dash_bootstrap_components.Col component (version 1.2.1) with the ID “Graph(id=‘sun_burst1’, figure={}, style={‘height’: ‘45vh’})” detected a Component for a prop other than children Prop id has value Graph(id=‘sun_burst1’, figure={}, style={‘height’: ‘45vh’})

Anyone any Ideas? Can I even have Markdown in a app with the dcc.Graph?

Hello @twelsh37,

First, nice work. :slight_smile:

Is the width supposed to be associated with the column or the markdown? Right now, its associated with the children.

1 Like

Hi. Thanks Jinnyzor,

That’s exactly what I needed, someone to point out the obvious.

Working code is as follows:

# Sunburst chart
                dbc.Col(
                    [dcc.Markdown('#### Breakdown of Risk by Risk Type - 2021 ####'),
                    dcc.Graph(id='sun_burst1', figure={}, style={'height': '45vh'})],
                    width=4, lg={'size': 5, "offset": 0, 'order': 'second'}
                        ),

I was incorrectly wrapping the width as well. You were correct I just took the children, And all is now looking good. All marked up the way I want it.

Now to fix the viewport, so the sunburst doesn’t ping off-screen. It all should fit in a 1920 x 1080 window. That’s the next challenge.

2 Likes