Update filled-area-plots.md

Author: LiamConnors

doc/python/filled-area-plots.md

@@ -6,9 +6,9 @@ jupyter:
       extension: .md
       format_name: markdown
       format_version: '1.3'
-      jupytext_version: 1.14.1
+      jupytext_version: 1.16.1
   kernelspec:
-    display_name: Python 3
+    display_name: Python 3 (ipykernel)
     language: python
     name: python3
   language_info:
@@ -20,7 +20,7 @@ jupyter:
     name: python
     nbconvert_exporter: python
     pygments_lexer: ipython3
-    version: 3.8.8
+    version: 3.10.11
   plotly:
     description: How to make filled area plots in Python with Plotly.
     display_as: basic
@@ -80,13 +80,11 @@ fig = px.area(df, x="medal", y="count", color="nation",
 fig.show()
 ```
 
-<!-- #region tags=[] -->
 ### Filled area chart with plotly.graph_objects
 
 #### Basic Overlaid Area Chart
-<!-- #endregion -->
 
-```python tags=[]
+```python
 import plotly.graph_objects as go
 
 fig = go.Figure()
@@ -131,6 +129,44 @@ fig.add_trace(go.Scatter(
 fig.show()
 ```
 
+#### Gradient Fill
+
+*New in 5.20*
+
+Scatter traces with a fill, support a `fillgradient`, which is a `dict` of options that define the gradient. Use `fillgradient.colorscale` to define the colorscale for the gradient and choose a `type` to define the orientation of the gradient (`'horizontal'`, `'vertical'` or `'radial'`). 
+
+In the following example, we've defined a `horizontal` `fillgradient` with a colorscale of three colors. 
+
+```python
+import plotly.graph_objects as go
+
+fig = go.Figure(
+    [
+        go.Scatter(
+            x=[1, 2, 3, 4],
+            y=[3, 4, 8, 3],
+            fill=None,
+            mode="lines",
+            line_color="indigo",
+        ),
+        go.Scatter(
+            x=[1, 2, 3, 4],
+            y=[1, 6, 2, 6],
+            fill="tonexty",
+            mode="lines",
+            line_color="indigo",
+            fillgradient=dict(
+                type="horizontal",
+                colorscale=[[0.0, "#FFB3BA"], [0.5, "#FFDFBA"], [1.0, "#BAE1FF"]],
+            ),
+        ),
+    ]
+)
+
+fig.show()
+
+```
+
 #### Stacked Area Chart
 
 The `stackgroup` parameter is used to add the `y` values of the different traces in the same group. Traces in the same group fill up to the next trace of the group.