Skip to content

Commit 4368a59

Browse files
Joseph Damibaemmanuellenicolaskruchten
authored
Config options update (#2199)
* add examples * typo fixup * Fix pytest (#2181) * Update doc/python/configuration-options.md Co-Authored-By: Emmanuelle Gouillart <[email protected]> * Update doc/python/configuration-options.md Co-Authored-By: Emmanuelle Gouillart <[email protected]> * Update doc/python/configuration-options.md Co-Authored-By: Emmanuelle Gouillart <[email protected]> * Update doc/python/configuration-options.md Co-Authored-By: Emmanuelle Gouillart <[email protected]> * add dependencies * fix typo * put dash code in markdown so it doesn't execute * use html escape * tweaks Co-authored-by: Emmanuelle Gouillart <[email protected]> Co-authored-by: Nicolas Kruchten <[email protected]>
1 parent 3f78485 commit 4368a59

File tree

1 file changed

+142
-18
lines changed

1 file changed

+142
-18
lines changed

doc/python/configuration-options.md

Lines changed: 142 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ jupyter:
66
extension: .md
77
format_name: markdown
88
format_version: '1.1'
9-
jupytext_version: 1.2.1
9+
jupytext_version: 1.1.1
1010
kernelspec:
1111
display_name: Python 3
1212
language: python
@@ -20,9 +20,10 @@ jupyter:
2020
name: python
2121
nbconvert_exporter: python
2222
pygments_lexer: ipython3
23-
version: 3.7.3
23+
version: 3.7.0
2424
plotly:
25-
description: How to set configuration options of plotly graphs in python.
25+
description: How to set the configuration options of figures using the Plotly
26+
Python graphing library.
2627
display_as: file_settings
2728
language: python
2829
layout: base
@@ -33,74 +34,192 @@ jupyter:
3334
thumbnail: thumbnail/modebar-icons.png
3435
---
3536

37+
# Configuration Options
3638

37-
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
39+
The `.show()` method that you use to display your figures also accepts a `config` parameter.
3840

39-
##### Enable Scroll Zoom
41+
You can set the configuration options for your figure by passing a dictionary to this parameter which contains the options you want to set.
42+
43+
If you don't set an option's value, it will be automatically be set to the default value for that option.
44+
45+
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
46+
47+
##### Enabling Scroll Zoom
48+
49+
This option allows users to zoom in and out of figures using the scroll wheel on their mouse and/or a two-finger scroll.
4050

4151
```python
4252
import plotly.graph_objects as go
4353

4454
fig = go.Figure()
4555

56+
config = dict({'scrollZoom': True})
57+
4658
fig.add_trace(
4759
go.Scatter(
4860
x=[1, 2, 3],
4961
y=[1, 3, 1]))
5062

51-
fig.show(config={'scrollZoom': True})
63+
fig.show(config=config)
5264
```
5365

54-
##### Display ModeBar
66+
##### Forcing The Modebar to Always Be Visible
67+
68+
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.
69+
70+
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.
5571

5672
```python
5773
import plotly.graph_objects as go
5874

5975
fig = go.Figure()
6076

77+
config = {'displayModeBar': True}
78+
6179
fig.add_trace(
6280
go.Scatter(
6381
x=[1, 2, 3],
6482
y=[1, 3, 1]))
6583

66-
fig.show(config={'displayModeBar': True})
84+
fig.show(config=config)
6785
```
6886

69-
##### Edit Mode - change the title and axis titles
87+
##### Preventing the Modebar from Appearing
88+
89+
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.
90+
91+
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.
7092

7193
```python
7294
import plotly.graph_objects as go
7395

7496
fig = go.Figure()
7597

98+
config = {'displayModeBar': False}
99+
76100
fig.add_trace(
77101
go.Scatter(
78102
x=[1, 2, 3],
79103
y=[1, 3, 1]))
80104

81-
fig.show(config={'editable': True})
105+
fig.show(config=config)
82106
```
83107

84-
##### Multiple Config Options at Once!
108+
109+
##### Hiding the Plotly Logo on the Modebar
85110

86111
```python
87112
import plotly.graph_objects as go
88113

89114
fig = go.Figure()
90115

116+
config = {'displaylogo': False}
117+
91118
fig.add_trace(
92119
go.Scatter(
93120
x=[1, 2, 3],
94121
y=[1, 3, 1]))
95122

96-
fig.show(config={
123+
fig.show(config=config)
124+
```
125+
126+
##### Turning Off Responsiveness
127+
128+
By default, figures you create with the `plotly.py` package are [responsive](https://en.wikipedia.org/wiki/Responsive_web_design). 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](https://plot.ly/python/renderers/) environments.
129+
130+
Try resizing your browser window to see this behavior in effect on this page.
131+
132+
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.
133+
134+
```python
135+
import plotly.graph_objects as go
136+
137+
fig = go.Figure()
138+
139+
config = {'responsive': False}
140+
141+
fig.add_trace(
142+
go.Scatter(
143+
x=[1, 2, 3],
144+
y=[1, 3, 1]))
145+
146+
fig.show(config=config)
147+
```
148+
149+
##### Making A Static Chart
150+
151+
```python
152+
import plotly.graph_objects as go
153+
154+
fig = go.Figure()
155+
156+
config = {'staticPlot': True}
157+
158+
fig.add_trace(
159+
go.Scatter(
160+
x=[1, 2, 3],
161+
y=[1, 3, 1]))
162+
163+
fig.show(config=config)
164+
```
165+
166+
##### Customizing Download Plot Options
167+
168+
```python
169+
import plotly.graph_objects as go
170+
171+
fig = go.Figure()
172+
173+
config = {
174+
'toImageButtonOptions': {
175+
'format': 'svg', # one of png, svg, jpeg, webp
176+
'filename': 'custom_image',
177+
'height': 500,
178+
'width': 700,
179+
'scale': 1 # Multiply title/legend/axis/canvas sizes by this factor
180+
}
181+
}
182+
183+
fig.add_trace(
184+
go.Scatter(
185+
x=[1, 2, 3],
186+
y=[1, 3, 1]))
187+
188+
fig.show(config=config)
189+
```
190+
191+
##### Specifying Multiple Configuration Options Simultaneously
192+
193+
The dictionary that you use to specify configuration options for your figures can contain more than one configuration key/value pair.
194+
195+
```python
196+
import plotly.graph_objects as go
197+
198+
fig = go.Figure()
199+
200+
config = dict({
97201
'scrollZoom': True,
98202
'displayModeBar': True,
99203
'editable': True
100204
})
205+
206+
fig.add_trace(
207+
go.Scatter(
208+
x=[1, 2, 3],
209+
y=[1, 3, 1]))
210+
211+
fig.show(config=config)
101212
```
102213

103-
##### Remove Modebar Buttons
214+
##### Removing Modebar Buttons
215+
216+
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:
217+
218+
-'2D': `zoom2d`, `pan2d`, `select2d`, `lasso2d`, `zoomIn2d`, `zoomOut2d`, `autoScale2d`, `resetScale2d`
219+
-'3D': `zoom3d`, `pan3d`, `rbitRotation`, `tableRotation`, `handleDrag3d`, `resetCameraDefault3d`, `resetCameraLastSave3d`, `hoverClosest3d`
220+
-'Cartesian': `hoverClosestCartesian`, `hoverCompareCartesian`
221+
-'Geo': `zoomInGeo`, `zoomOutGeo`, `resetGeo`, `hoverClosestGeo`
222+
-'Other': `hoverClosestGl2d`, `hoverClosestPie`, `toggleHover`, `resetViews`, `toImage: sendDataToCloud`, `toggleSpikelines`, `resetViewMapbox`
104223

105224
```python
106225
import plotly.graph_objects as go
@@ -117,13 +236,15 @@ fig.show(config={
117236
})
118237
```
119238

120-
### Double-click Delay
121-
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).
122-
This setting propagates to all on-subplot double clicks (except for geo and mapbox).
239+
### Double-Click Delay
240+
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).
241+
This setting propagates to all on-subplot double clicks (except for `geo` and `mapbox`).
123242

124243
```python
125244
import plotly.graph_objects as go
126245

246+
config = {'doubleClickDelay': 1000}
247+
127248
fig = go.Figure(go.Bar(
128249
y = [3, 5, 3, 2],
129250
x = ["2019-09-02", "2019-10-10", "2019-11-12", "2019-12-22"],
@@ -132,10 +253,13 @@ fig = go.Figure(go.Bar(
132253

133254
fig.update_layout(xaxis = {'type': 'date'})
134255

135-
fig.show(config = {'doubleClickDelay': 1000})
256+
fig.show(config=config)
136257
```
137258

138-
#### Reference
259+
#### Configuring Figures in Dash Apps
139260

261+
The same configuration dictionary that you pass to the `config` parameter of the `show()` method can also be passed to the [`config` property of a `dcc.Graph` component](https://dash.plotly.com/dash-core-components/graph).
262+
263+
#### Reference
140264

141265
See config options at https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L6

0 commit comments

Comments
 (0)