'new in' and modebar info

Author: nicolaskruchten

doc/python/bar-charts.md

@@ -133,13 +133,16 @@ fig = px.bar(df, x="sex", y="total_bill",
 fig.show()
 ```
 
+*New in v5.0*
+
+
 Bar charts afford the use of [patterns (also known as hatching or texture)](/python/pattern-hatching-texture/) in addition to color:
 
 ```python
 import plotly.express as px
 df = px.data.medals_long()
 
-fig = px.bar(df, x="medal", y="count", color="nation", 
+fig = px.bar(df, x="medal", y="count", color="nation",
              pattern_shape="nation", pattern_shape_sequence=[".", "x", "+"])
 fig.show()
 ```
@@ -347,8 +350,8 @@ for key in data:
         ])
     ))
 
-fig.update_xaxes( 
-    tickvals=np.cumsum(widths)-widths/2, 
+fig.update_xaxes(
+    tickvals=np.cumsum(widths)-widths/2,
     ticktext= ["%s<br>%d" % (l, w) for l, w in zip(labels, widths)]
 )
 

doc/python/configuration-options.md

@@ -63,18 +63,20 @@ fig.add_trace(
 fig.show(config=config)
 ```
 
-### Forcing The Modebar to Always Be Visible
+### Turning Off Responsiveness
 
-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, 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, 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.
+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 = {'displayModeBar': True}
+config = {'responsive': False}
 
 fig.add_trace(
     go.Scatter(
@@ -84,18 +86,14 @@ fig.add_trace(
 fig.show(config=config)
 ```
 
-### 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.
-
-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.
+### Making A Static Chart
 
 ```python
 import plotly.graph_objects as go
 
 fig = go.Figure()
 
-config = {'displayModeBar': False}
+config = {'staticPlot': True}
 
 fig.add_trace(
     go.Scatter(
@@ -105,15 +103,18 @@ fig.add_trace(
 fig.show(config=config)
 ```
 
+### Forcing The Modebar to Always Be Visible
 
-### Hiding the Plotly Logo on 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 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 = {'displaylogo': False}
+config = {'displayModeBar': True}
 
 fig.add_trace(
     go.Scatter(
@@ -123,20 +124,18 @@ fig.add_trace(
 fig.show(config=config)
 ```
 
-### 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.
+### Preventing the Modebar from Appearing
 
-Try resizing your browser window to see this behavior in effect on this page.
+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.
 
-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.
+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 = {'responsive': False}
+config = {'displayModeBar': False}
 
 fig.add_trace(
     go.Scatter(
@@ -146,14 +145,15 @@ fig.add_trace(
 fig.show(config=config)
 ```
 
-### Making A Static Chart
+
+### Hiding the Plotly Logo on the Modebar
 
 ```python
 import plotly.graph_objects as go
 
 fig = go.Figure()
 
-config = {'staticPlot': True}
+config = {'displaylogo': False}
 
 fig.add_trace(
     go.Scatter(
@@ -163,7 +163,7 @@ fig.add_trace(
 fig.show(config=config)
 ```
 
-### Customizing Download Plot Button Options
+### Customizing Modebar "Download Plot" Button
 
 The camera icon on the modebar causes a static version of the figure to be downloaded via the user's browser. The default behaviour is to download a PNG of size 700 by 450 pixels.
 
@@ -202,38 +202,36 @@ fig = px.bar(x=[1, 2, 3], y=[1, 3, 1])
 fig.show(config=config)
 ```
 
-### Specifying Multiple Configuration Options Simultaneously
+### Removing Modebar Buttons
 
-The dictionary that you use to specify configuration options for your figures can contain more than one configuration key/value pair.
+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:
+
+  - **High-level**: `zoom`, `pan`, `select`, `zoomIn`, `zoomOut`, `autoScale`, `resetScale`
+  - **2D**: `zoom2d`, `pan2d`, `select2d`, `lasso2d`, `zoomIn2d`, `zoomOut2d`, `autoScale2d`, `resetScale2d`
+  - **2D Shape Drawing**: `drawline`, `drawopenpath`, `drawclosedpath`, `drawcircle`, `drawrect`, `eraseshape`
+  - **3D**: `zoom3d`, `pan3d`, `orbitRotation`, `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
 
 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)
+fig.show(config={
+    'modeBarButtonsToRemove': ['zoom', 'pan']
+})
 ```
 
-### Removing Modebar Buttons
+*New in v5.0*
 
-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`, `orbitRotation`, `tableRotation`, `handleDrag3d`, `resetCameraDefault3d`, `resetCameraLastSave3d`, `hoverClosest3d`
-  - **Cartesian**: `hoverClosestCartesian`, `hoverCompareCartesian`
-  - **Geo**: `zoomInGeo`, `zoomOutGeo`, `resetGeo`, `hoverClosestGeo`
-  - **Other**: `hoverClosestGl2d`, `hoverClosestPie`, `toggleHover`, `resetViews`, `toImage: sendDataToCloud`, `toggleSpikelines`, `resetViewMapbox`
+The `layout.modebar.remove` attribute can be used instead of the approach used above:
 
 ```python
 import plotly.graph_objects as go
@@ -245,13 +243,13 @@ fig.add_trace(
         x=[1, 2, 3],
         y=[1, 3, 1]))
 
-fig.show(config={
-    'modeBarButtonsToRemove': ['toggleSpikelines','hoverCompareCartesian']
-})
+fig.update_layout(modebar_remove=['zoom', 'pan'])
 ```
 
 ### Add optional shape-drawing buttons to modebar
 
+*New in v4.7*
+
 Some modebar buttons of Cartesian plots are optional and have to be added explicitly, using the `modeBarButtonsToAdd` config attribute. These buttons are used for drawing or erasing shapes. See [the tutorial on shapes and shape drawing](python/shapes#drawing-shapes-on-cartesian-plots) for more details.
 
 ```python
@@ -273,6 +271,29 @@ fig.show(config={'modeBarButtonsToAdd':['drawline',
                                        ]})
 ```
 
+*New in v5.0*
+
+The `layout.modebar.add` attribute can be used instead of the approach used above:
+
+```python
+import plotly.graph_objects as go
+import plotly.express as px
+df = px.data.iris()
+fig = px.scatter(df, x='petal_width', y='sepal_length', color='species')
+fig.update_layout(
+    dragmode='drawopenpath',
+    newshape_line_color='cyan',
+    title_text='Draw a path to separate versicolor and virginica',
+    modebar_add=['drawline',
+        'drawopenpath',
+        'drawclosedpath',
+        'drawcircle',
+        'drawrect',
+        'eraseshape'
+       ]
+)
+```
+
 ### 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`).

doc/python/histograms.md

@@ -179,6 +179,7 @@ df = px.data.tips()
 fig = px.histogram(df, x="day", y="total_bill", category_orders=dict(day=["Thur", "Fri", "Sat", "Sun"]))
 fig.show()
 ```
+*New in v5.0*
 
 Histograms afford the use of [patterns (also known as hatching or texture)](/python/pattern-hatching-texture/) in addition to color:
 

doc/python/hover-text-and-formatting.md

@@ -250,6 +250,8 @@ fig.show()
 
 ### Hover Templates with Mixtures of Period data
 
+*New in v5.0*
+
 When [displaying periodic data](https://plotly.com/python/time-series/#displaying-period-data) with mixed-sized periods (i.e. quarterly and monthly) in conjunction with `x` or `x unified` hovermodes and using `hovertemplate`, the `xhoverformat` attribute can be used to control how each period's X value is displayed, and the special `%{xother}` hover-template directive can be used to control how the X value is displayed for points that do not share the exact X coordinate with the point that is being hovered on. `%{xother}` will return an empty string when the X value is the one being hovered on, otherwise it will return `(%{x})`. The special `%{_xother}`, `%{xother_}` and `%{_xother_}` variations will display with spaces before, after or around the parentheses, respectively.
 
 ```python

doc/python/icicle-charts.md

@@ -33,6 +33,8 @@ jupyter:
     thumbnail: thumbnail/icicle.png
 ---
 
+*New in v5.0*
+
 Icicle charts visualize hierarchical data using rectangular sectors that cascade from root to leaves in one of four directions: up, down, left, or right. Similar to [Sunburst charts](https://plotly.com/python/sunburst-charts/) and [Treemaps](https://plotly.com/python/treemaps/) charts, the hierarchy is defined by `labels` (`names` for `px.icicle`) and `parents` attributes. Click on one sector to zoom in/out, which also displays a pathbar on the top of your icicle. To zoom out, you can click the parent sector or click the pathbar as well.
 
 ### Basic Icicle Plot with plotly.express
@@ -96,7 +98,7 @@ When the argument of color corresponds to non-numerical data, discrete colors ar
 ```python
 import plotly.express as px
 df = px.data.tips()
-fig = px.icicle(df, path=[px.Constant("all"), 'sex', 'day', 'time'], 
+fig = px.icicle(df, path=[px.Constant("all"), 'sex', 'day', 'time'],
                 values='total_bill', color='day')
 fig.update_layout(margin = dict(t=50, l=25, r=25, b=25))
 fig.show()
@@ -107,7 +109,7 @@ In the example below the color of **Saturday** and **Sunday** sectors is the sam
 ```python
 import plotly.express as px
 df = px.data.tips()
-fig = px.icicle(df, path=[px.Constant("all"), 'sex', 'day', 'time'], 
+fig = px.icicle(df, path=[px.Constant("all"), 'sex', 'day', 'time'],
                 values='total_bill', color='time')
 fig.update_layout(margin = dict(t=50, l=25, r=25, b=25))
 fig.show()
@@ -120,7 +122,7 @@ For more information about discrete colors, see the [dedicated page](https://plo
 ```python
 import plotly.express as px
 df = px.data.tips()
-fig = px.icicle(df, path=[px.Constant("all"), 'sex', 'day', 'time'], 
+fig = px.icicle(df, path=[px.Constant("all"), 'sex', 'day', 'time'],
                 values='total_bill', color='time',
                 color_discrete_map={'(?)':'lightgrey', 'Lunch':'gold', 'Dinner':'darkblue'})
 fig.update_layout(margin = dict(t=50, l=25, r=25, b=25))
@@ -369,7 +371,7 @@ parents = ["", "container", "A1", "A2", "A3", "A4", "container", "B1"]
 fig = go.Figure(go.Icicle(
     labels = labels,
     parents = parents,
-    marker_colors = ["pink", "royalblue", "lightgray", "purple", 
+    marker_colors = ["pink", "royalblue", "lightgray", "purple",
                      "cyan", "lightgray", "lightblue", "lightgreen"]))
 
 fig.update_layout(margin = dict(t=50, l=25, r=25, b=25))

doc/python/pattern-hatching-texture.md

@@ -34,6 +34,8 @@ jupyter:
     thumbnail: thumbnail/pattern.png
 ---
 
+*New in v5.0*
+
 [Bar charts](/python/bar-charts/), [histograms](/python/histograms/) and [polar bar charts](/python/wind-rose-charts/) have large markers which support not only a fill color, but also an optional **pattern** (also known as "hatching" or "texture"). This can be used for a variety of reasons:
 
 * to double-encode variables (i.e. using both color and pattern) to improve accessibility for visually-impaired end-users

doc/python/renderers.md

@@ -253,7 +253,9 @@ It is important to note that `FigureWidget` does not use the renderers framework
 
 ## Performance
 
-No matter the approach chosen to display a figure, [the figure data structure](https://plotly.com/python/figure-structure/) is first (automatically, internally) serialized into a JSON string before being transferred from the Python context to the browser (or [to an HTML file first](https://plotly.com/python/interactive-html-export/) or [to Kaleido for static image export](https://plotly.com/python/static-image-export/)). 
+No matter the approach chosen to display a figure, [the figure data structure](https://plotly.com/python/figure-structure/) is first (automatically, internally) serialized into a JSON string before being transferred from the Python context to the browser (or [to an HTML file first](https://plotly.com/python/interactive-html-export/) or [to Kaleido for static image export](https://plotly.com/python/static-image-export/)).
+
+*New in v5.0*
 
 The default JSON serialization mechanism can be slow for figures with many data points or with large `numpy` arrays or data frames. **If [the `orjson` package](https://github.com/ijl/orjson) is installed**, `plotly` will use that instead of the built-in `json` package, which can lead to **5-10x** speedups for large figures.
 

doc/python/time-series.md

@@ -205,6 +205,8 @@ fig.show()
 
 ### Hover Templates with Mixtures of Period data
 
+*New in v5.0*
+
 When displaying periodic data with mixed-sized periods (i.e. quarterly and monthly) in conjunction with [`x` or `x unified` hovermodes and using `hovertemplate`](https://plotly.com/python/hover-text-and-formatting/), the `xhoverformat` attribute can be used to control how each period's X value is displayed, and the special `%{xother}` hover-template directive can be used to control how the X value is displayed for points that do not share the exact X coordinate with the point that is being hovered on. `%{xother}` will return an empty string when the X value is the one being hovered on, otherwise it will return `(%{x})`. The special `%{_xother}`, `%{xother_}` and `%{_xother_}` variations will display with spaces before, after or around the parentheses, respectively.
 
 ```python