How to adjust frameMargins in dcc.Graph.config?

I find frameMargins when reading the Graph documentation, in which it says “frameMargins (number; optional):
If we DO autosize, set the frame margins in percents of plot size.” However, when I set a number, however small or large, my figure becomes tiny. Does anyone know how to work with this parameter?

dcc.Graph(figure = fig, config = { 'displaylogo': False, 'frameMargins': 10, 'modeBarButtonsToRemove':['select2d', 'lasso2d']}, )

Hello,

You’re absolutely right, setting a number for frameMargins in dcc.Graph.config behaves differently than what the documentation might imply. Here’s why:

The Misunderstanding:

The documentation states that frameMargins sets the margins in percents of plot size. However, it actually works in pixels. This can be confusing, especially for small values.

How to Use frameMargins Effectively:

Here’s how to adjust frameMargins to achieve the desired effect:

Small Margins: To achieve a small margin around your plot, you’ll need to use a larger value for frameMargins. A good starting marykayintouch point might be around 20-30 pixels. Experiment with different values to find the sweet spot for your figure.

Relative Margins: If you want a consistent margin relative to the figure size, consider using a combination of autosize and CSS styling. Here’s how:

Set autosize to True in your dcc.Graph.config. This will automatically resize the graph to fit the container.

Use CSS to apply margins to the .graph-container class generated by Dash. You can target this class with a selector like:

.graph-container {
    margin: 10px; /* Adjust margins as needed */
}

This approach ensures consistent margins regardless of the figure size.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

fig = ... # Your figure definition

app.layout = html.Div([
    dcc.Graph(
        id="example-graph",
        figure=fig,
        config={
            "displaylogo": False,
            "frameMargins": 30,  # Adjust for desired margin size
            "modeBarButtonsToRemove": ["select2d", "lasso2d"],
        },
    ),
    html.Div(style={"margin": "10px"}),  # Optional CSS for consistent margin (adjust as needed)
])

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

Remember to experiment with different values for frameMargins and CSS margins to achieve the desired layout for your graph.

I hope my solution work well for you.