How to disable the modebar at the top?

📊 Plotly Python
1

Hi
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],
    xaxis="x1",
    yaxis="y1"
)

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>
<html>
    <head>
        <meta charset="UTF-8">
        <title>dbx Metadata</title>
		<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
    </head>
	<body>
		<h2>Summary</h2>
		<div style="display: flex">	
			<div>
    	        <span>Description here for lorem ipsum</span>
        	</div>
			'''+div1+'''
			<h2>Chart1</h2>
			'''+div2+'''
		</div>
	</body>
</html>
'''

text_file = open("report01.html", "w")
text_file.write(html_string)
text_file.close()

This is how the html page look like:

Screenshot from 2021-12-16 17-01-56
Screenshot from 2021-12-16 17-01-561145×555 13.3 KB

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

2

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 plotly.express as px

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

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

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.

4

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
5

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
6

@netro
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