Skip to content

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

Merged
merged 13 commits into from
Apr 6, 2020
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .circleci/create_conda_optional_env.sh
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ if [ ! -d $HOME/miniconda/envs/circle_optional ]; then
./miniconda.sh -b -p $HOME/miniconda

# Create environment
# PYTHON_VERSION=3.6
# PYTHON_VERSION=2.7 or 3.5
$HOME/miniconda/bin/conda create -n circle_optional --yes python=$PYTHON_VERSION \
requests nbformat six retrying psutil pandas decorator pytest mock nose poppler xarray scikit-image ipython jupyter ipykernel ipywidgets

Expand Down
241 changes: 226 additions & 15 deletions doc/python/configuration-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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.

```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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not clear to me how this is different from the previous example?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen Shot 2020-02-17 at 11 40 56 AM

This example has a button in the modebar rather than the hyperlink in the bottom right of the figure.

Copy link
Contributor

Choose a reason for hiding this comment

The 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
Copy link
Contributor

Choose a reason for hiding this comment

The 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?

Copy link
Author

Choose a reason for hiding this comment

The 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
Expand All @@ -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:

-'2D': `zoom2d`, `pan2d`, `select2d`, `lasso2d`, `zoomIn2d`, `zoomOut2d`, `autoScale2d`, `resetScale2d`
-'3D': `zoom3d`, `pan3d`, `rbitRotation`, `tableRotation`, `handleDrag3d`, resetCameraDefault3d, resetCameraLastSave3d, `hoverClosest3d`
-'Cartesian': `hoverClosestCartesian`, `hoverCompareCartesian`
-'Geo': `zoomInGeo`, `zoomOutGeo`, `resetGeo`, `hoverClosestGeo`
-'Other': `hoverClosestGl2d`, `hoverClosestPie`, `toggleHover`, `resetViews`, `toImage: sendDataToCloud`, `toggleSpikelines`, `resetViewMapbox`

```python
import plotly.graph_objects as go

Expand All @@ -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"],
Expand All @@ -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

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
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
Expand Down