No margin, no axes, no titles Plotly figure

Question

I'm trying to create a clean and simple figure, but there seems to always be some kind of margin in the resulting HTML element. Here's the code:

import plotly.graph_objects as go

fig = go.Figure()
fig.add_trace(
    go.Bar(
        x=[87],
        y=['empty'],
        orientation='h',
        hoverinfo='none',
    )
)
fig.add_trace(
    go.Bar(
        x=[13],
        y=['empty'],
        orientation='h',
        hoverinfo='none',
    )
)

fig.update_xaxes(
    showticklabels=False,
    showgrid=False,
    zeroline=False,
    range=[0, 100]
)
fig.update_yaxes(
    showticklabels=False,
    showgrid=False,
    zeroline=False,
)
fig.update_layout(
    barmode='stack',
    height=50,
    margin=dict(l=0, r=0, t=0, b=0),
    paper_bgcolor='rgba(0,0,0,0)',
    plot_bgcolor='rgba(0,0,0,0)',
    showlegend=False,
)
fig.show()

which results in this figure: (The white background is just the browser background.)

Although I have set the margins to zero, there still seems to be a top and bottom margin when I inspect the element in the browser:

I would like to have no margins at all. How do I accomplish this?

In the end, I just want to add rounded corners, but they turn out to be a bit off because the margins push the corner up and down, respectively.

Answer 1

I'm not sure why, but adding range=[0, 0.4] to update_yaxes solves the problem for me:

fig.update_yaxes(
    showticklabels=False,
    showgrid=False,
    zeroline=False,
    range=[0, 0.4],
)

I don't know why 0.4 is a good number. I think anything lower than 0.4 will also do in this case.