Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 34faa1c

Browse files
author
Joseph Damiba
committedFeb 14, 2020
add examples for configuration options
1 parent 6cc19b8 commit 34faa1c

File tree

1 file changed

+227
-15
lines changed

1 file changed

+227
-15
lines changed
 

‎doc/python/configuration-options.md

Lines changed: 227 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ jupyter:
55
text_representation:
66
extension: .md
77
format_name: markdown
8-
format_version: '1.1'
9-
jupytext_version: 1.2.1
8+
format_version: '1.2'
9+
jupytext_version: 1.3.2
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 Ploty's Python
26+
graphing library.
2627
display_as: file_settings
2728
language: python
2829
layout: base
@@ -33,40 +34,150 @@ 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.
40+
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
3846

3947
##### Enable Scroll Zoom
4048

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.
50+
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+
##### Force 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+
##### Never Display The Modebar
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.
92+
93+
```python
94+
import plotly.graph_objects as go
95+
96+
fig = go.Figure()
97+
98+
config = {'displayModeBar': False}
99+
100+
fig.add_trace(
101+
go.Scatter(
102+
x=[1, 2, 3],
103+
y=[1, 3, 1]))
104+
105+
fig.show(config=config)
106+
```
107+
108+
##### Display the `Edit Chart` Link
109+
110+
Set `showLink` to `True` in order to make your figure editable on [Chart Studio](https://plot.ly/online-chart-maker).
111+
112+
```python
113+
import plotly.graph_objects as go
114+
115+
fig = go.Figure()
116+
117+
config = {'showLink': True}
118+
119+
fig.add_trace(
120+
go.Scatter(
121+
x=[1, 2, 3],
122+
y=[1, 3, 1]))
123+
124+
fig.show(config=config)
125+
```
126+
127+
### Display The `Edit In Chart Studio` Modebar Button
128+
129+
```python
130+
import plotly.graph_objects as go
131+
132+
fig = go.Figure()
133+
134+
config = {'showEditInChartStudio': True}
135+
136+
fig.add_trace(
137+
go.Scatter(
138+
x=[1, 2, 3],
139+
y=[1, 3, 1]))
140+
141+
fig.show(config=config)
142+
```
143+
144+
##### Hide the Plotly Logo on the Modebar
145+
146+
```python
147+
import plotly.graph_objects as go
148+
149+
fig = go.Figure()
150+
151+
config = {'displaylogo': False}
152+
153+
fig.add_trace(
154+
go.Scatter(
155+
x=[1, 2, 3],
156+
y=[1, 3, 1]))
157+
158+
fig.show(config=config)
159+
```
160+
161+
##### Making A Responsive Chart
162+
163+
```python
164+
import plotly.graph_objects as go
165+
166+
fig = go.Figure()
167+
168+
config = {'responsive': True}
169+
170+
fig.add_trace(
171+
go.Scatter(
172+
x=[1, 2, 3],
173+
y=[1, 3, 1]))
174+
175+
fig.show(config=config)
176+
```
177+
178+
##### Editable Mode
179+
180+
In editable mode, users can edit the chart title, axis labels and trace names in the legend.
70181

71182
```python
72183
import plotly.graph_objects as go
@@ -81,27 +192,81 @@ fig.add_trace(
81192
fig.show(config={'editable': True})
82193
```
83194

84-
##### Multiple Config Options at Once!
195+
##### Making A Static Chart
85196

86197
```python
87198
import plotly.graph_objects as go
88199

89200
fig = go.Figure()
90201

202+
config = {'staticPlot': True}
203+
91204
fig.add_trace(
92205
go.Scatter(
93206
x=[1, 2, 3],
94207
y=[1, 3, 1]))
95208

96-
fig.show(config={
209+
fig.show(config=config)
210+
```
211+
212+
##### Customize Download Plot Options
213+
214+
```python
215+
import plotly.graph_objects as go
216+
217+
fig = go.Figure()
218+
219+
config = {
220+
'toImageButtonOptions': {
221+
'format': 'svg', # one of png, svg, jpeg, webp
222+
'filename': 'custom_image',
223+
'height': 500,
224+
'width': 700,
225+
'scale': 1 # Multiply title/legend/axis/canvas sizes by this factor
226+
}
227+
}
228+
229+
fig.add_trace(
230+
go.Scatter(
231+
x=[1, 2, 3],
232+
y=[1, 3, 1]))
233+
234+
fig.show(config=config)
235+
```
236+
237+
##### Specifying Multiple Configuration Options Simultaneously!
238+
239+
The dictionary that you use to specify configuration options for your figures can contain more than one configuration key/value pair.
240+
241+
```python
242+
import plotly.graph_objects as go
243+
244+
fig = go.Figure()
245+
246+
config = dict({
97247
'scrollZoom': True,
98248
'displayModeBar': True,
99249
'editable': True
100250
})
251+
252+
fig.add_trace(
253+
go.Scatter(
254+
x=[1, 2, 3],
255+
y=[1, 3, 1]))
256+
257+
fig.show(config=config)
101258
```
102259

103260
##### Remove Modebar Buttons
104261

262+
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:
263+
264+
-'2D': `zoom2d`, `pan2d`, `select2d`, `lasso2d`, `zoomIn2d`, `zoomOut2d`, `autoScale2d`, `resetScale2d`
265+
-'3D': `zoom3d`, `pan3d`, `rbitRotation`, `tableRotation`, `handleDrag3d`, resetCameraDefault3d, resetCameraLastSave3d, `hoverClosest3d`
266+
-'Cartesian': `hoverClosestCartesian`, `hoverCompareCartesian`
267+
-'Geo': `zoomInGeo`, `zoomOutGeo`, `resetGeo`, `hoverClosestGeo`
268+
-'Other': `hoverClosestGl2d`, `hoverClosestPie`, `toggleHover`, `resetViews`, `toImage: sendDataToCloud`, `toggleSpikelines`, `resetViewMapbox`
269+
105270
```python
106271
import plotly.graph_objects as go
107272

@@ -117,13 +282,15 @@ fig.show(config={
117282
})
118283
```
119284

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).
285+
### Double Click Delay
286+
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).
287+
This setting propagates to all on-subplot double clicks (except for `geo` and `mapbox`).
123288

124289
```python
125290
import plotly.graph_objects as go
126291

292+
config = {'doubleClickDelay': 1000}
293+
127294
fig = go.Figure(go.Bar(
128295
y = [3, 5, 3, 2],
129296
x = ["2019-09-02", "2019-10-10", "2019-11-12", "2019-12-22"],
@@ -132,7 +299,52 @@ fig = go.Figure(go.Bar(
132299

133300
fig.update_layout(xaxis = {'type': 'date'})
134301

135-
fig.show(config = {'doubleClickDelay': 1000})
302+
fig.show(config=config)
303+
```
304+
305+
#### Configuring Figures in Dash Apps
306+
307+
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.
308+
309+
```python
310+
import dash
311+
import dash_core_components as dcc
312+
import dash_html_components as html
313+
314+
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
315+
316+
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
317+
318+
config = dict({
319+
'scrollZoom': True,
320+
'displayModeBar': True,
321+
'editable': True
322+
})
323+
324+
app.layout = html.Div(children=[
325+
html.H1(children='Hello Dash'),
326+
327+
html.Div(children='''
328+
Dash: A web application framework for Python.
329+
'''),
330+
331+
dcc.Graph(
332+
id='example-graph',
333+
figure={
334+
'data': [
335+
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
336+
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
337+
],
338+
'layout': {
339+
'title': 'Dash Data Visualization'
340+
}
341+
},
342+
config=config
343+
)
344+
])
345+
346+
# if __name__ == '__main__':
347+
# app.run_server(debug=True)
136348
```
137349

138350
#### Reference

0 commit comments

Comments
 (0)
Please sign in to comment.