How to auto-scale graph for different pc, different windows system?

Dash Python
1

Hi

I change to use a different pc with windows 11 instead of windows 10. There are a lot of issuses with graph size. It is too big to fit into dcc.Graph.

For example, I define dcc.Graph with CSS style

heatmap_graph = dcc.Graph(id="heatmapgraph",className='heatmap-graph')

in CSS, I define the height using 100vh-5px

.heatmap-graph 
{
    height: calc(100vh - 5px);
}

In actual graph plotting, I used height=900 so the heatmap fit into original defined size of dcc.Graph.

    fig.update_layout(
            title={"text": plot_title, 
                   "x": 0.5, "y": 0.98, "font": {"size": 20}},
            legend={"yanchor": "top", "y": 0.97,'x':0.999, "tracegroupgap": 450,
                   'font':{'size': 12}},  # for bottom line plot with legend
            margin={"t": 75, "l": 80, "r": 100, "b": 50,'pad': 0},  
            height=900,
			}

However, after changing to windows 11, the heatmap graph is too big so I have to change height to be 700 in order to fit.

Now I have to manually change all the graph to fit dcc.Graph(), is there any other way I can auto-scale the graph into defined dcc.Graph()?

Thanks

2

Hello @roudan,

Typically, it is easier to adjust the size to be responsive to the container width, and then adjust the container width via css, or just a regular % of the available width.

1 Like
3

Thank you so much jinny. so if I understand correctly, I should have the below 2 definitions

  1. when defining dcc.Graph(classname=‘heatmap-graph’,config={‘responsive’:True}) (include CSS class and config.responsive?
  2. in graph plotting, update layout using fig.update_layout(autosize=True) by adding autosize=True

Pls let me know if the above definition are the optimal to go? Thanks

4

I can’t remember exactly. But I think that is correct.

With autoSize you will be constricted to whichever hits first, the height or the width.

Also, one thing I do all the time is adjust my margins, which can lead to a small graph because of all the padding.

1 Like