3D figure initially getting cut off at the bottom in browser environment

📊 Plotly Python
1

plotly.py version: 7.1.0

I’m currently faced with the issue that every time when I try to generate a 3D plot with Plotly and display it in a browser environment, a part of the figure at the bottom is initially always cut off. An example is given below.

import plotly.express as px

df = px.data.iris()

fig = px.scatter_3d(
df,
x="sepal_length",
y="sepal_width",
z="petal_width",
color="species",
)

fig.show(renderer="browser")

which gives as result:

screenshot
screenshot1920×1032 87.2 KB

I have done a search for descriptions of the same issue and existing solutions, but unfortunately have not yet found one that resolves this particular issue. Does anyone have any advice for me?

2

Welcome to the community! You’re not doing anything wrong. The cause is the default 3D camera. Plotly defaults the camera to eye=(1.25, 1.25, 1.25) and does not zoom out to fit the plot. The corner of the box closest to the camera can extend past the bottom of the plot area, and that gets clipped as a result.

The iris data makes the problem worse. The default aspectmode="auto" scales each axis by its data range. The sepal_length range is about 1.5 times the other two ranges, so the x axis gets stretched and pushes that corner further out.

You can move the camera further away to get the whole plot to show up:

import plotly.express as px

df = px.data.iris()

fig = px.scatter_3d(
df,
x="sepal_length",
y="sepal_width",
z="petal_width",
color="species",
)
# Update the camera to show the whole scene
fig.update_layout(scene_camera_eye=dict(x=1.75, y=1.75, z=1.75))

fig.show(renderer="browser")

You can read more about setting the camera here.

3

This finally resolved the issue for me. Thank you.