How to make responsive Dash Graphs

Examples > How to make responsive Dash Graphs
Table of Contents

How works the responsive parameter?

The responsive parameter in Dash’s Graph component controls how your graph responds to window resizing and container element changes. This is crucial for creating graphs that work well across different screen sizes and layouts.

Official documentation

From the documentation:

responsive (a value equal to: true, false or ‘auto’; default 'auto'): If True, the Plotly.js plot will be fully responsive to window resize and parent element resize event. This is achieved by overriding config.responsive to True, figure.layout.autosize to True and unsetting figure.layout.height and figure.layout.width. If False, the Plotly.js plot not be responsive to window resize and parent element resize event. This is achieved by overriding config.responsive to False and figure.layout.autosize to False. If ‘auto’ (default), the Graph will determine if the Plotly.js plot can be made fully responsive (True) or not (False) based on the values in config.responsive, figure.layout.autosize, figure.layout.height, figure.layout.width. This is the legacy behavior of the Graph component. Needs to be combined with appropriate dimension / styling through the style prop to fully take effect.

Parameter Values:

  1. True: Forces the graph to be fully responsive
  2. False: Disables responsiveness
  3. 'auto' (default): Determines responsiveness based on other settings

Code Examples and Use Cases

1. Fully Responsive Graph (responsive=True)

Use this when you want your graph to always adapt to its container size, horizontally and vertically:

# Container with fluid width
html.Div([ 
      dcc.Graph(
          responsive=True,
          figure=base_figure, 
          style={'height': '100%'}  # Necessary to adapt vertically
      )
  ], style={
      'width': '100%',  # Fluid width
      'height': '400px',
      'border': '2px solid #2196F3',
      'padding': '10px',
      'margin': '10px 0'
  })

In most cases, the container should have a fixed height to make this work. You can however make the container height 100% of its own height using CSS flexbox.

2. Non-Responsive Graph (responsive=False)

Use this when you need fixed dimensions regardless of screen size:

# Container with fixed width
html.Div([
    dcc.Graph(
        responsive=False,
        figure={
            'data': fig['data'],
            'layout': {
                'width': 500,  # Fixed width
                'height': 300  # Fixed height
            }
        }
    )
], style={
    'width': '800px',
    'height': '400px',
    'border': '2px solid #4CAF50',
    'padding': '10px'
})

Note that in this case, the graph will take the default dimensions in the figure layout. The container should have greater width and heights than the figure, or the graph will overflow.

Setting CSS style with width and height properties on the graph will have the negative effect of making the container believe that your graph is smaller or larger than what it is really.

3. Auto-Responsive Graph (responsive=’auto’)

Use this default setting when you want the graph to determine responsiveness based on its layout settings:

# Container with max-width constraint
html.Div([
    dcc.Graph(
        responsive='auto',
        figure={
            'data': fig['data'],
            'layout': {
                'title': 'Auto-Responsive Graph',
                'autosize': True,
                'height': 350  # Fixed height only
            }
        }
    )
], style={
    'width': '100%',
    'height': '400px',
    'border': '2px solid #FF9800',
    'padding': '10px'
})

In this example, the graph is horizontally responsive but not vertically responsive as its height is fixed in the figure layout.

The ‘auto’ setting essentially lets you have fine-grained control over what aspects of your graph should be responsive while preserving other dimensional constraints you’ve set. Using responsive=True or False is often clearer.

4. Responsive with Constraints

Use this when you want responsiveness within certain bounds:

# Container with min/max constraints
html.Div([
    dcc.Graph(
        responsive=True,
        figure=fig
    )
], style={
    'width': '100%',
    'minWidth': '200px',
    'maxWidth': '500px',
    'height': '400px',
    'border': '2px solid #E91E63',
    'padding': '10px'
})

This case differs from the first one in the sense that 1) the graph height is not fluid and 2) there are maximum and minimum width specified on the container.

Best practices & tips

  • If you want the graph to have the same height as the container: always explicit the container’s height, otherwise setting height: 100% on the graph will not work.
  • To simplify things, keep the graph has the only child of your container.
  • Add padding to prevent graph from touching container edges, use the CSS overflow if you need to hide the overflowing content or make scrollable container.
  • Use percentage widths for fluid layouts, combined with CSS properties like max-width and max-height.

Tags