Is it possible to give graph object margin values any other unit than px?

📊 Plotly Python
1

Hey all,

I know that a margin can be added to any Plotly graph object via a dictionary (e.g margin=dict(b='35',t='35')). Those are in px units as default setting. However, keeping them in px units are not great for a complete responsive design, and keeping them as it is results in very big margins wrt to the graph object itself on small devices.

Hence, my question is; it is possible to set them in any other unit such as % or vw, vh. If yes, how can I do that?

Thank you all, in advance!

2

Hi @Berbere ,

I think, for now to define layout attribute like margin, if you use just plotly graph object only have options using unit in px.
This is based on the official docs below:

https://plotly.com/python-api-reference/generated/plotly.graph_objects.layout.html#plotly.graph_objects.layout.Margin

But, you can have more options if you use plotly graph object together in Dash to get more responsive view.
You can set margin unit as % or vw inside html.Div using style key.

from dash import Dash, dcc, html
import plotly.graph_objects as go 


fig = go.Figure()

fig.add_trace(
		go.Scatter(
			x=[10,20,30,40,50],
			y=[0.3,0.5,0.25,0.8,0.65],

			)
	)

fig.update_layout(
		dict(
				title="Custom Margin Unit",
				# margin=dict(b=200,l=200),
			)
	)

app = Dash(__name__)

app.layout=html.Div([
		dcc.Graph(figure=fig)
	], style={"margin-bottom": "50%","margin-left": "50%"})

if __name__ == "__main__":
	app.run(debug=True)

Hope this help.

3

Hey @farispriadi

Thank you so much for your reply! It sort of works. However, it seems as if there is a threshold value and the margin wont get lower than that(?) What I mean is; I can def see the difference for 10% and %25 but not for smaller values such as %5 and %1.

Do you have any idea about this phenomenon?

On the other hand, may I learn what is the thinking behind wrapping the dcc.Graph component with a html.Div? It seems like the style attribute of dcc.Graph component also allow me to change margins with different units than px?

Cheers!

4

Hi @Berbere ,

I think to see the difference margin variation you can try to set paper_bgcolor with different color.

And to answer second questions, Yes, you can add style directly on dcc.Graphand play margin size with difference units that available in CSS.

from dash import Dash, dcc, html
import plotly.graph_objects as go 


fig = go.Figure()

fig.add_trace(
		go.Scatter(
			x=[10,20,30,40,50],
			y=[0.3,0.5,0.25,0.8,0.65],

			)
	)

fig.update_layout(
		dict(
				title="Custom Margin Unit",
				# margin=dict(b=200,l=200),
				plot_bgcolor="lightgrey",
				paper_bgcolor="grey",
			)
	)

app = Dash(__name__)

app.layout=dcc.Graph(figure=fig,style={"margin-left": "1%"})
# app.layout=dcc.Graph(figure=fig,style={"margin-left": "5%"})

if __name__ == "__main__":
	app.run(debug=True)

With 5% of margin-left.

image
image1909×1006 50.8 KB

With 1% of margin-left.

image
image1911×1011 55 KB

From the images above, I hope the difference between 1% and 5% of margin value has more distinct.

Thanks.

5

Hey @farispriadi,

Thank you so much for your elaborate answer!

You made me realize that I need padding parameter rather than margin! Since, I have been working with a transparent paper_bgcolor, I completely forgot about its existence :sweat_smile: .

1 Like