-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Config options update #2199
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Config options update #2199
Changes from 3 commits
6a7ceb2
3d64ffe
fac4505
90e2bc8
b113fba
fea2657
6db8826
bdf8637
7b1759d
5521f8c
3baba0e
2dec2da
ccdcfcf
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,8 +5,8 @@ jupyter: | |
text_representation: | ||
extension: .md | ||
format_name: markdown | ||
format_version: '1.1' | ||
jupytext_version: 1.2.1 | ||
format_version: '1.2' | ||
jupytext_version: 1.3.2 | ||
kernelspec: | ||
display_name: Python 3 | ||
language: python | ||
|
@@ -20,9 +20,9 @@ jupyter: | |
name: python | ||
nbconvert_exporter: python | ||
pygments_lexer: ipython3 | ||
version: 3.7.3 | ||
version: 3.7.0 | ||
plotly: | ||
description: How to set configuration options of plotly graphs in python. | ||
description: How to set the configuration options of figures using Ploty's Python graphing library. | ||
display_as: file_settings | ||
language: python | ||
layout: base | ||
|
@@ -33,40 +33,150 @@ jupyter: | |
thumbnail: thumbnail/modebar-icons.png | ||
--- | ||
|
||
# Configuration Options | ||
|
||
You can pass a `config` dictionary with all configurations options such as `scrollZoom`, `editable`, and `displayModeBar`. For the complete list of config options check out: https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js | ||
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 | ||
|
||
##### Enable 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. | ||
|
||
```python | ||
import plotly.graph_objects as go | ||
|
||
fig = go.Figure() | ||
|
||
config = dict({'scrollZoom': True}) | ||
|
||
fig.add_trace( | ||
go.Scatter( | ||
x=[1, 2, 3], | ||
y=[1, 3, 1])) | ||
|
||
fig.show(config={'scrollZoom': True}) | ||
fig.show(config=config) | ||
``` | ||
|
||
##### Display ModeBar | ||
##### Force 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. | ||
|
||
```python | ||
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={'displayModeBar': True}) | ||
fig.show(config=config) | ||
``` | ||
|
||
##### Edit Mode - change the title and axis titles | ||
##### Never Display The Modebar | ||
|
||
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. | ||
jdamiba marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```python | ||
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) | ||
``` | ||
|
||
##### Display the `Edit Chart` Link | ||
|
||
Set `showLink` to `True` in order to make your figure editable on [Chart Studio](https://plot.ly/online-chart-maker). | ||
|
||
```python | ||
import plotly.graph_objects as go | ||
|
||
fig = go.Figure() | ||
|
||
config = {'showLink': True} | ||
|
||
fig.add_trace( | ||
go.Scatter( | ||
x=[1, 2, 3], | ||
y=[1, 3, 1])) | ||
|
||
fig.show(config=config) | ||
``` | ||
|
||
### Display The `Edit In Chart Studio` Modebar Button | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not clear to me how this is different from the previous example? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ok, maybe add a sentence here and above, and/or have the two examples in the same section? |
||
|
||
```python | ||
import plotly.graph_objects as go | ||
|
||
fig = go.Figure() | ||
|
||
config = {'showEditInChartStudio': True} | ||
|
||
fig.add_trace( | ||
go.Scatter( | ||
x=[1, 2, 3], | ||
y=[1, 3, 1])) | ||
|
||
fig.show(config=config) | ||
``` | ||
|
||
##### Hide the Plotly Logo on the Modebar | ||
|
||
```python | ||
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) | ||
``` | ||
|
||
##### Making A Responsive Chart | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This one would deserve more explanations I think: define responsiveness, and comment on figure behaviour when it's responsive. For example when I tried this config parameter does not make a figure responsive (resized when winodw is resized) in a Jupyter notebook, but in a Dash app the figure is responsive by default? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looking at this example, I think it actually makes more sense to make it about how to disable the default responsive behavior that figures have. I'm surprised figures aren't responsive in your Jupyter notebook- they are in mine 🤔 |
||
|
||
```python | ||
import plotly.graph_objects as go | ||
|
||
fig = go.Figure() | ||
|
||
config = {'responsive': True} | ||
|
||
fig.add_trace( | ||
go.Scatter( | ||
x=[1, 2, 3], | ||
y=[1, 3, 1])) | ||
|
||
fig.show(config=config) | ||
``` | ||
|
||
##### Editable Mode | ||
|
||
In editable mode, users can edit the chart title, axis labels and trace names in the legend. | ||
|
||
```python | ||
import plotly.graph_objects as go | ||
|
@@ -81,27 +191,81 @@ fig.add_trace( | |
fig.show(config={'editable': True}) | ||
``` | ||
|
||
##### Multiple Config Options at Once! | ||
##### Making A Static Chart | ||
|
||
```python | ||
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={ | ||
fig.show(config=config) | ||
``` | ||
|
||
##### Customize Download Plot Options | ||
|
||
```python | ||
import plotly.graph_objects as go | ||
|
||
fig = go.Figure() | ||
|
||
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.add_trace( | ||
go.Scatter( | ||
x=[1, 2, 3], | ||
y=[1, 3, 1])) | ||
|
||
fig.show(config=config) | ||
``` | ||
|
||
##### Specifying Multiple Configuration Options Simultaneously! | ||
|
||
The dictionary that you use to specify configuration options for your figures can contain more than one configuration key/value pair. | ||
|
||
```python | ||
import plotly.graph_objects as go | ||
|
||
fig = go.Figure() | ||
|
||
config = dict({ | ||
'scrollZoom': True, | ||
'displayModeBar': True, | ||
'editable': True | ||
}) | ||
|
||
fig.add_trace( | ||
go.Scatter( | ||
x=[1, 2, 3], | ||
y=[1, 3, 1])) | ||
|
||
fig.show(config=config) | ||
``` | ||
|
||
##### Remove 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: | ||
jdamiba marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
-'2D': `zoom2d`, `pan2d`, `select2d`, `lasso2d`, `zoomIn2d`, `zoomOut2d`, `autoScale2d`, `resetScale2d` | ||
-'3D': `zoom3d`, `pan3d`, `rbitRotation`, `tableRotation`, `handleDrag3d`, resetCameraDefault3d, resetCameraLastSave3d, `hoverClosest3d` | ||
jdamiba marked this conversation as resolved.
Show resolved
Hide resolved
|
||
-'Cartesian': `hoverClosestCartesian`, `hoverCompareCartesian` | ||
-'Geo': `zoomInGeo`, `zoomOutGeo`, `resetGeo`, `hoverClosestGeo` | ||
-'Other': `hoverClosestGl2d`, `hoverClosestPie`, `toggleHover`, `resetViews`, `toImage: sendDataToCloud`, `toggleSpikelines`, `resetViewMapbox` | ||
|
||
```python | ||
import plotly.graph_objects as go | ||
|
||
|
@@ -117,13 +281,15 @@ fig.show(config={ | |
}) | ||
``` | ||
|
||
### Double-click Delay | ||
Sets the maximum delay between two consecutive clicks to be interpreted as a double-click in ms. 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). | ||
### Double Click Delay | ||
Sets the maximum delay between two consecutive clicks to be interpreted as a double-click in `ms`. 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`). | ||
|
||
```python | ||
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"], | ||
|
@@ -132,7 +298,52 @@ fig = go.Figure(go.Bar( | |
|
||
fig.update_layout(xaxis = {'type': 'date'}) | ||
|
||
fig.show(config = {'doubleClickDelay': 1000}) | ||
fig.show(config=config) | ||
``` | ||
|
||
#### Configuring Figures in Dash Apps | ||
nicolaskruchten marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
The same configuration dictionary that you pass to the `config` parameter of the `show()` method can also be passed to the `config` parameter of a `dcc.Graph` component. | ||
|
||
```python | ||
import dash | ||
import dash_core_components as dcc | ||
nicolaskruchten marked this conversation as resolved.
Show resolved
Hide resolved
|
||
import dash_html_components as html | ||
|
||
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] | ||
|
||
app = dash.Dash(__name__, external_stylesheets=external_stylesheets) | ||
|
||
config = dict({ | ||
'scrollZoom': True, | ||
'displayModeBar': True, | ||
'editable': True | ||
}) | ||
|
||
app.layout = html.Div(children=[ | ||
html.H1(children='Hello Dash'), | ||
|
||
html.Div(children=''' | ||
Dash: A web application framework for Python. | ||
'''), | ||
|
||
dcc.Graph( | ||
id='example-graph', | ||
figure={ | ||
'data': [ | ||
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'}, | ||
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'}, | ||
], | ||
'layout': { | ||
'title': 'Dash Data Visualization' | ||
} | ||
}, | ||
config=config | ||
) | ||
]) | ||
|
||
# if __name__ == '__main__': | ||
# app.run_server(debug=True) | ||
``` | ||
|
||
#### Reference | ||
|
Uh oh!
There was an error while loading. Please reload this page.