From 6a7ceb23b840c6c33b55fbfa97b98ccd9a7225eb Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Fri, 14 Feb 2020 15:10:15 -0500 Subject: [PATCH 01/12] add examples --- doc/python/configuration-options.md | 242 ++++++++++++++++++++++++++-- 1 file changed, 227 insertions(+), 15 deletions(-) diff --git a/doc/python/configuration-options.md b/doc/python/configuration-options.md index 89eedba9805..873c3127f7a 100644 --- a/doc/python/configuration-options.md +++ b/doc/python/configuration-options.md @@ -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,10 @@ 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 +34,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 + +```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 + +```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 +192,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 @@ -117,13 +282,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 +299,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 From 3d64ffe73a372b4088c65dc253a8eda4e92623a5 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Fri, 14 Feb 2020 15:13:38 -0500 Subject: [PATCH 02/12] typo fixup --- doc/python/configuration-options.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/doc/python/configuration-options.md b/doc/python/configuration-options.md index 873c3127f7a..db232d6c90e 100644 --- a/doc/python/configuration-options.md +++ b/doc/python/configuration-options.md @@ -22,8 +22,7 @@ jupyter: pygments_lexer: ipython3 version: 3.7.0 plotly: - description: How to set the configuration options of figures using Ploty's Python - graphing library. + description: How to set the configuration options of figures using Ploty's Python graphing library. display_as: file_settings language: python layout: base From fac4505e8d9d696d20221c547218214ec4035feb Mon Sep 17 00:00:00 2001 From: Emmanuelle Gouillart Date: Thu, 13 Feb 2020 16:45:23 -0500 Subject: [PATCH 03/12] Fix pytest (#2181) --- .circleci/create_conda_optional_env.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/create_conda_optional_env.sh b/.circleci/create_conda_optional_env.sh index ebd907688a5..d1d48f7e998 100755 --- a/.circleci/create_conda_optional_env.sh +++ b/.circleci/create_conda_optional_env.sh @@ -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 From 90e2bc8288b5115507717c44d8990ff907107660 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Mon, 17 Feb 2020 11:35:32 -0500 Subject: [PATCH 04/12] Update doc/python/configuration-options.md Co-Authored-By: Emmanuelle Gouillart --- doc/python/configuration-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/configuration-options.md b/doc/python/configuration-options.md index db232d6c90e..bca0188b70d 100644 --- a/doc/python/configuration-options.md +++ b/doc/python/configuration-options.md @@ -22,7 +22,7 @@ jupyter: pygments_lexer: ipython3 version: 3.7.0 plotly: - description: How to set the configuration options of figures using Ploty's Python graphing library. + description: How to set the configuration options of figures using Plotly Python graphing library. display_as: file_settings language: python layout: base From b113fba079bd12959fb7f8b55e25318cabd1f40b Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Mon, 17 Feb 2020 11:36:07 -0500 Subject: [PATCH 05/12] Update doc/python/configuration-options.md Co-Authored-By: Emmanuelle Gouillart --- doc/python/configuration-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/configuration-options.md b/doc/python/configuration-options.md index bca0188b70d..234f4360c82 100644 --- a/doc/python/configuration-options.md +++ b/doc/python/configuration-options.md @@ -87,7 +87,7 @@ fig.show(config=config) 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. +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 From fea26577193098fe2da8f93f9624636d5f099770 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Mon, 17 Feb 2020 11:36:22 -0500 Subject: [PATCH 06/12] Update doc/python/configuration-options.md Co-Authored-By: Emmanuelle Gouillart --- doc/python/configuration-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/configuration-options.md b/doc/python/configuration-options.md index 234f4360c82..6454a9494cb 100644 --- a/doc/python/configuration-options.md +++ b/doc/python/configuration-options.md @@ -258,7 +258,7 @@ 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: +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` From 6db8826e1faa07398fbaaa51e7f3880c8a27702f Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Mon, 17 Feb 2020 11:36:28 -0500 Subject: [PATCH 07/12] Update doc/python/configuration-options.md Co-Authored-By: Emmanuelle Gouillart --- doc/python/configuration-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/configuration-options.md b/doc/python/configuration-options.md index 6454a9494cb..0d985633f08 100644 --- a/doc/python/configuration-options.md +++ b/doc/python/configuration-options.md @@ -261,7 +261,7 @@ fig.show(config=config) 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` +-'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` From bdf8637e08b6b73736e686339bdf353aa3795b55 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Mon, 17 Feb 2020 11:58:58 -0500 Subject: [PATCH 08/12] add dependencies --- binder/requirements.txt | 2 ++ doc/python/configuration-options.md | 13 ++++++++++--- doc/requirements.txt | 2 ++ 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/binder/requirements.txt b/binder/requirements.txt index d59fb34283f..6ada8eb32a5 100644 --- a/binder/requirements.txt +++ b/binder/requirements.txt @@ -14,3 +14,5 @@ networkx scikit-image datashader pyarrow +dash_core_components +dash_html_components diff --git a/doc/python/configuration-options.md b/doc/python/configuration-options.md index 0d985633f08..c6058d8dd5f 100644 --- a/doc/python/configuration-options.md +++ b/doc/python/configuration-options.md @@ -22,7 +22,8 @@ jupyter: pygments_lexer: ipython3 version: 3.7.0 plotly: - description: How to set the configuration options of figures using Plotly Python graphing library. + description: How to set the configuration options of figures using the Plotly + Python graphing library. display_as: file_settings language: python layout: base @@ -157,14 +158,20 @@ fig.add_trace( fig.show(config=config) ``` -##### Making A Responsive Chart +##### Turn Off Responsiveness + +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. + +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. ```python import plotly.graph_objects as go fig = go.Figure() -config = {'responsive': True} +config = {'responsive': False} fig.add_trace( go.Scatter( diff --git a/doc/requirements.txt b/doc/requirements.txt index 37d0944f8f2..dbfd9014c68 100644 --- a/doc/requirements.txt +++ b/doc/requirements.txt @@ -24,3 +24,5 @@ pathlib python-frontmatter datashader pyarrow +dash_core_components +dash_html_components From 7b1759d0752029e7fb7141ff10f1cf4b517df96c Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Mon, 17 Feb 2020 14:14:08 -0500 Subject: [PATCH 09/12] fix typo --- doc/python/configuration-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/configuration-options.md b/doc/python/configuration-options.md index c6058d8dd5f..e422b0c2b4a 100644 --- a/doc/python/configuration-options.md +++ b/doc/python/configuration-options.md @@ -36,7 +36,7 @@ jupyter: # Configuration Options -The `show()` method that you use to display your figures also accepts a `config` parameter. +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. From 5521f8c88d71655f3fcc6f0b1b968a47e5c504ba Mon Sep 17 00:00:00 2001 From: Emmanuelle Gouillart Date: Thu, 13 Feb 2020 16:45:23 -0500 Subject: [PATCH 10/12] put dash code in markdown so it doesn't execute --- binder/requirements.txt | 4 +--- doc/python/configuration-options.md | 12 +++++++----- doc/requirements.txt | 2 -- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/binder/requirements.txt b/binder/requirements.txt index 6ada8eb32a5..61f3bc3fdda 100644 --- a/binder/requirements.txt +++ b/binder/requirements.txt @@ -13,6 +13,4 @@ requests networkx scikit-image datashader -pyarrow -dash_core_components -dash_html_components +pyarrow \ No newline at end of file diff --git a/doc/python/configuration-options.md b/doc/python/configuration-options.md index e422b0c2b4a..df28cb2e2fc 100644 --- a/doc/python/configuration-options.md +++ b/doc/python/configuration-options.md @@ -5,8 +5,8 @@ jupyter: text_representation: extension: .md format_name: markdown - format_version: '1.2' - jupytext_version: 1.3.2 + format_version: '1.1' + jupytext_version: 1.1.1 kernelspec: display_name: Python 3 language: python @@ -105,9 +105,9 @@ fig.add_trace( fig.show(config=config) ``` -##### Display the `Edit Chart` Link +##### Display The `Edit Chart` Hyperlink -Set `showLink` to `True` in order to make your figure editable on [Chart Studio](https://plot.ly/online-chart-maker). +Set `showLink` to `True` in order to display a hyperlink which allows users to edit the figure using [Chart Studio](https://plot.ly/online-chart-maker). ```python import plotly.graph_objects as go @@ -124,7 +124,7 @@ fig.add_trace( fig.show(config=config) ``` -### Display The `Edit In Chart Studio` Modebar Button +If you would prefer to use an icon in the modebar as a hyperlink, set `showEditInChartStudio` to `True`. ```python import plotly.graph_objects as go @@ -312,6 +312,7 @@ fig.show(config=config) 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 @@ -353,6 +354,7 @@ app.layout = html.Div(children=[ # app.run_server(debug=True) ``` + #### Reference diff --git a/doc/requirements.txt b/doc/requirements.txt index dbfd9014c68..37d0944f8f2 100644 --- a/doc/requirements.txt +++ b/doc/requirements.txt @@ -24,5 +24,3 @@ pathlib python-frontmatter datashader pyarrow -dash_core_components -dash_html_components From 3baba0e5317d0741b2eb3e22d13b4479e75ca431 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Tue, 18 Feb 2020 18:56:58 -0500 Subject: [PATCH 11/12] use html escape --- doc/python/configuration-options.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/doc/python/configuration-options.md b/doc/python/configuration-options.md index df28cb2e2fc..c7a1fa90493 100644 --- a/doc/python/configuration-options.md +++ b/doc/python/configuration-options.md @@ -312,8 +312,8 @@ fig.show(config=config) 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
@@ -352,10 +352,9 @@ app.layout = html.Div(children=[
 
 # if __name__ == '__main__':
     # app.run_server(debug=True)
-```
-
+
+ #### Reference - -See config options at https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L6 +See config options at https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L6 \ No newline at end of file From ccdcfcf714e90415ff52daf9f34ed2826165d1c6 Mon Sep 17 00:00:00 2001 From: Nicolas Kruchten Date: Mon, 6 Apr 2020 16:01:32 -0400 Subject: [PATCH 12/12] tweaks --- doc/python/configuration-options.md | 133 ++++------------------------ 1 file changed, 19 insertions(+), 114 deletions(-) diff --git a/doc/python/configuration-options.md b/doc/python/configuration-options.md index c7a1fa90493..b5b174dfc8a 100644 --- a/doc/python/configuration-options.md +++ b/doc/python/configuration-options.md @@ -34,19 +34,19 @@ jupyter: thumbnail: thumbnail/modebar-icons.png --- -# Configuration Options +# 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. +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. +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 +##### 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. +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 @@ -63,7 +63,7 @@ fig.add_trace( fig.show(config=config) ``` -##### Force The Modebar to Always Be Visible +##### 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. @@ -84,7 +84,7 @@ fig.add_trace( fig.show(config=config) ``` -##### Never Display The Modebar +##### 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. @@ -105,43 +105,8 @@ fig.add_trace( fig.show(config=config) ``` -##### Display The `Edit Chart` Hyperlink -Set `showLink` to `True` in order to display a hyperlink which allows users to edit the figure using [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) -``` - -If you would prefer to use an icon in the modebar as a hyperlink, set `showEditInChartStudio` to `True`. - -```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 +##### Hiding the Plotly Logo on the Modebar ```python import plotly.graph_objects as go @@ -158,9 +123,9 @@ fig.add_trace( fig.show(config=config) ``` -##### Turn Off Responsiveness +##### Turning Off Responsiveness -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. +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. Try resizing your browser window to see this behavior in effect on this page. @@ -181,23 +146,6 @@ fig.add_trace( 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 - -fig = go.Figure() - -fig.add_trace( - go.Scatter( - x=[1, 2, 3], - y=[1, 3, 1])) - -fig.show(config={'editable': True}) -``` - ##### Making A Static Chart ```python @@ -215,7 +163,7 @@ fig.add_trace( fig.show(config=config) ``` -##### Customize Download Plot Options +##### Customizing Download Plot Options ```python import plotly.graph_objects as go @@ -240,9 +188,9 @@ fig.add_trace( fig.show(config=config) ``` -##### Specifying Multiple Configuration Options Simultaneously! +##### 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. +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 @@ -263,7 +211,7 @@ fig.add_trace( fig.show(config=config) ``` -##### Remove Modebar Buttons +##### 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: @@ -288,9 +236,9 @@ 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 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`). ```python import plotly.graph_objects as go @@ -310,51 +258,8 @@ 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. - - -

-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)
-
- +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). #### Reference -See config options at https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L6 \ No newline at end of file +See config options at https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L6