How to set the configuration options of figures using the Plotly Python graphing library.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
Configuration Options¶The .show()
method that you use to display your figures also accepts a config
parameter.
You can set the configuration options for your figure by passing a dictionary to this parameter which contains the options you want to set.
If you don't set an option's value, it will be automatically be set to the default value for that option.
For the complete list of configuration options and their defaults see: https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js
Enabling Scroll Zoom¶This option allows users to zoom in and out of figures using the scroll wheel on their mouse and/or a two-finger scroll.
In [1]:
import plotly.graph_objects as go fig = go.Figure() config = {'scrollZoom': True} fig.add_trace( go.Scatter( x=[1, 2, 3], y=[1, 3, 1])) fig.show(config=config)Turning Off Responsiveness¶
By default, figures you create with the plotly.py
package are responsive. Responsive figures automatically change their height and width when the size of the window they are displayed in changes. This is true for figures which are displayed in web browsers on desktops and mobile, Jupyter Notebooks, and other rendering environments.
Try resizing your browser window to see this behavior in effect on this page.
If you would like to disable this default behavior and force your figures to always have the same height and width regardless of the window size, set the value of the responsive
key to False
in your figure's configuration dictionary.
In [2]:
import plotly.graph_objects as go fig = go.Figure() config = {'responsive': False} fig.add_trace( go.Scatter( x=[1, 2, 3], y=[1, 3, 1])) fig.show(config=config)
In [3]:
import plotly.graph_objects as go fig = go.Figure() config = {'staticPlot': True} fig.add_trace( go.Scatter( x=[1, 2, 3], y=[1, 3, 1])) fig.show(config=config)Forcing The Modebar to Always Be Visible¶
When users hover over a figure generated with plotly.py, a modebar appears in the top-right of the figure. This presents users with several options for interacting with the figure.
By default, the modebar is only visible while the user is hovering over the chart. If you would like the modebar to always be visible regardless of whether or not the user is currently hovering over the figure, set the displayModeBar attribute in the configuration of your figure to true.
In [4]:
import plotly.graph_objects as go fig = go.Figure() config = {'displayModeBar': True} fig.add_trace( go.Scatter( x=[1, 2, 3], y=[1, 3, 1])) fig.show(config=config)Preventing the Modebar from Appearing¶
When users hover over a figure generated with plotly.py
, a modebar appears in the top-right of the figure. This presents users with several options for interacting with the figure.
By default, the modebar is only visible while the user is hovering over the chart. If you would like the modebar to never be visible, then set the displayModeBar
attribute in the config of your figure to false.
In [5]:
import plotly.graph_objects as go fig = go.Figure() config = {'displayModeBar': False} fig.add_trace( go.Scatter( x=[1, 2, 3], y=[1, 3, 1])) fig.show(config=config)Hiding the Plotly Logo on the Modebar¶
In [6]:
import plotly.graph_objects as go fig = go.Figure() config = {'displaylogo': False} fig.add_trace( go.Scatter( x=[1, 2, 3], y=[1, 3, 1])) fig.show(config=config)Customizing Modebar "Download Plot" Button¶
The camera icon on the modebar causes a static version of the figure to be downloaded via the user's browser. The default behaviour is to download a PNG of size 700 by 450 pixels.
This behavior can be controlled via the toImageButtonOptions
configuration key.
In [7]:
import plotly.express as px config = { 'toImageButtonOptions': { 'format': 'svg', # one of png, svg, jpeg, webp 'filename': 'custom_image', 'height': 500, 'width': 700, 'scale': 1 # Multiply title/legend/axis/canvas sizes by this factor } } fig = px.bar(x=[1, 2, 3], y=[1, 3, 1]) fig.show(config=config)
Figures can be set to download at the currently-rendered size by setting height
and width
to None
:
In [8]:
import plotly.express as px config = { 'toImageButtonOptions': { 'height': None, 'width': None, } } fig = px.bar(x=[1, 2, 3], y=[1, 3, 1]) fig.show(config=config)Removing Modebar Buttons¶
To delete buttons from the modebar, pass an array of strings containing the names of the buttons you want to remove to the modeBarButtonsToRemove
attribute in the figure's configuration dictionary. Note that different chart types have different default modebars. The following is a list of all the modebar buttons and the chart types they are associated with:
zoom
, pan
, select
, zoomIn
, zoomOut
, autoScale
, resetScale
zoom2d
, pan2d
, select2d
, lasso2d
, zoomIn2d
, zoomOut2d
, autoScale2d
, resetScale2d
, v1hovermode
drawline
, drawopenpath
, drawclosedpath
, drawcircle
, drawrect
, eraseshape
zoom3d
, pan3d
, orbitRotation
, tableRotation
, handleDrag3d
, resetCameraDefault3d
, resetCameraLastSave3d
, hoverClosest3d
hoverClosestCartesian
, hoverCompareCartesian
zoomInGeo
, zoomOutGeo
, resetGeo
, hoverClosestGeo
hoverClosestGl2d
, hoverClosestPie
, toggleHover
, resetViews
, toImage
, sendDataToCloud
, toggleSpikelines
, resetViewMapbox
In [9]:
import plotly.graph_objects as go fig = go.Figure() fig.add_trace( go.Scatter( x=[1, 2, 3], y=[1, 3, 1])) fig.show(config={ 'modeBarButtonsToRemove': ['zoom', 'pan'] })
New in v5.0
The layout.modebar.remove
attribute can be used instead of the approach used above:
In [10]:
import plotly.graph_objects as go fig = go.Figure() fig.add_trace( go.Scatter( x=[1, 2, 3], y=[1, 3, 1])) fig.update_layout(modebar_remove=['zoom', 'pan']) fig.show()Add optional shape-drawing buttons to modebar¶
New in v4.7
Some modebar buttons of Cartesian plots are optional and have to be added explicitly, using the modeBarButtonsToAdd
config attribute. These buttons are used for drawing or erasing shapes. See the tutorial on shapes and shape drawing for more details.
In [11]:
import plotly.express as px df = px.data.iris() fig = px.scatter(df, x='petal_width', y='sepal_length', color='species') fig.update_layout( dragmode='drawopenpath', newshape_line_color='cyan', title_text='Draw a path to separate versicolor and virginica' ) fig.show(config={'modeBarButtonsToAdd': ['drawline', 'drawopenpath', 'drawclosedpath', 'drawcircle', 'drawrect', 'eraseshape' ]})
New in v5.0
The layout.modebar.add
attribute can be used instead of the approach used above:
In [12]:
import plotly.express as px df = px.data.iris() fig = px.scatter(df, x='petal_width', y='sepal_length', color='species') fig.update_layout( dragmode='drawopenpath', newshape_line_color='cyan', title_text='Draw a path to separate versicolor and virginica', modebar_add=['drawline', 'drawopenpath', 'drawclosedpath', 'drawcircle', 'drawrect', 'eraseshape' ] ) fig.show()Double-Click Delay¶
Sets the maximum delay between two consecutive clicks to be interpreted as a double-click in milliseconds. This is the time interval between first mousedown and second mouseup. The default timing is 300 ms (less than half a second). This setting propagates to all on-subplot double clicks (except for geo
and mapbox
).
In [13]:
import plotly.graph_objects as go config = {'doubleClickDelay': 1000} fig = go.Figure(go.Bar( y=[3, 5, 3, 2], x=["2019-09-02", "2019-10-10", "2019-11-12", "2019-12-22"], texttemplate="%{label}", textposition="inside")) fig.update_layout(xaxis={'type': 'date'}) fig.show(config=config)Disabling Buttons for Specific Axes¶
New in 6.3
Disabling the zoom in, zoom out, and autoscale buttons for specific axes is supported on cartesian axes using the modebardisable
attribute. In the following example, the zoom in and zoom out buttons are disabled on the xaxis
, meaning these buttons only zoom in and out on the yaxis
. Disable the autoscale button using modebardisable='autoscale'
. You can also disable the zoom and autoscale buttons using modebardisable='zoominout+autoscale'
.
In [14]:
import plotly.graph_objects as go import plotly.data df = plotly.data.stocks() fig = go.Figure( data=[ go.Scatter( x=df['date'], y=df['GOOG'], mode='lines+markers', name='Google Stock Price' ) ], layout=go.Layout( title='Google Stock Price Over Time with Mode Bar Disabled', xaxis=dict( title='Date', # Try zooming in or out using the modebar buttons. These only apply to the yaxis in this exampe. modebardisable='zoominout' ), yaxis=dict( title='Stock Price (USD)', ) ) ) fig.show()What About Dash?¶
Dash is an open-source framework for building analytical applications, with no Javascript required, and it is tightly integrated with the Plotly graphing library.
Learn about how to install Dash at https://dash.plot.ly/installation.
Everywhere in this page that you see fig.show()
, you can display the same figure in a Dash application by passing it to the figure
argument of the Graph
component from the built-in dash_core_components
package like this:
import plotly.graph_objects as go # or plotly.express as px fig = go.Figure() # or any Plotly Express function e.g. px.bar(...) # fig.add_trace( ... ) # fig.update_layout( ... ) from dash import Dash, dcc, html app = Dash() app.layout = html.Div([ dcc.Graph(figure=fig) ]) app.run(debug=True, use_reloader=False) # Turn off reloader if inside Jupyter
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4