How do I hide the grid lines that appear on dcc.Graph by default?

Dash Python
1

Say I have an app where based on what company a user selects in a dropdown, the office locations of that company are plotted in a map in a dcc.Graph div. Before the user selects anything, I get the blank gridlines:

image
image1366×436 4.6 KB

Is there any way to hide these gridlines and show nothing when nothing is selected in the dropdown? I tried to find if there’s any parameter in dcc.Graph to hide gridlines, but couldn’t find anything.

2

Hi Krisada619,

You can turn of gridlines in your figure on the Y or X axis.

For instance like this:

dcc.Graph(figure={
                            'data': traces,
                            'layout': go.Layout(                                
                                xaxis =  {                                     
                                    'showgrid': False
                                         },
                                yaxis = {                              
                                   'showgrid': True
                                        }
                                    },                                                                
                                                        )
                       ),
                       }
2 Likes
3

showgrid turns off the light background lines, but not the dark line at 0. The zero line can be removed with 'zeroline': False

3 Likes
4

Hello,
I also had this same question and the code is not working for me for some reason. I am referencing an output in a callback via an id. This is what I used:

html.Div([
                html.P('Title of plot in section '),
                dcc.Graph(id='bar_plot',
                          figure={
                            'layout': go.Layout(                                
                                xaxis =  {                                     
                                    'showgrid': False
                                         },
                                yaxis = {                              
                                   'showgrid': True
                                        })
                                    },                                                                
                       ),
                ]),

What could I be doing wrong?

1 Like
5

Had a similar issue, your callback might get called with an empty/None input when the page is first loaded. Simple way around that is to put the “default figure” in the callback like this:

@app.callback(Output("bar_plot","figure"),[Input("select","value")])
def udpate_plot(selection):
    if not selection:
        return {
            'layout': go.Layout(
                xaxis =  {                                     
                    'showgrid': False
                },
                yaxis = {                              
                    'showgrid': True
                })
            }
    #else return actual figure
1 Like