How to disable the modebar at the top?

I am trying to create an HTML page consisting of the figures and table created using plotly. I do not want the modebar for the figures. I am using to_html to get the figure’s div.
This is the code I am using:

import plotly.graph_objs as go

trace1 = go.Table(
    header=dict(values=['A Scores', 'B Scores']),
    cells=dict(values=[[100, 90, 80, 90],
                       [95, 85, 75, 95]]),

trace2 = go.Bar(
    x=[1, 2, 3],
    y=[4, 5, 6],

data1 = [trace1]
fig1 = go.Figure(data = data1)
fig1.update_layout(width=500, height=300)

data2 = [trace2]
fig2 = go.Figure(data = data2)
fig2.update_layout(width=400, height=300)

div1=fig1.to_html(include_plotlyjs=False, full_html=False)
div2=fig2.to_html(include_plotlyjs=False, full_html=False)

html_string = '''
<!doctype html>
        <meta charset="UTF-8">
        <title>dbx Metadata</title>
		<script src=""></script> 
		<div style="display: flex">	
    	        <span>Description here for lorem ipsum</span>

text_file = open("report01.html", "w")

This is how the html page look like:

As it can be seen just above the bar diagram the display bar is visible, I want to get rid of it.

Hello @netro,
Instead of using to_html you can use the write_html method and set the config of the figure to hide the modebar.
Something like this:

import as px

fig =px.scatter(x=range(10), y=range(10))

fig.write_html("path/to/file.html", include_plotlyjs=True, config = {'displayModeBar': False})

HI @atharvakatre
Thanks for the reply.

In the above screenshot, the table is also a figure, so if I use write_html only one fig will be used.
I want to place the fig according to my wish, like we do in an html page.
I hope you got my point.

Sorry @netro my bad, I just learnt that we can pass the config dictionary in both to_html as well write_html methods.

Keeping rest of your code unchanged just make the below changes in your to_html method:

div1=fig1.to_html(include_plotlyjs=False, full_html=False, config = {'displayModeBar': False})
div2=fig2.to_html(include_plotlyjs=False, full_html=False, config = {'displayModeBar': False})
1 Like

Thanks @atharvakatre, it’s working.
One more suggestion I need, now that the display mode bar is gone it’s left some space for the
chart in the top and bottom, how to get rid of the space? Any idea.

1 Like

You can adjust that by setting the margin values inside your update_layout method. Check out the first example on this page - Setting Graph Size