Skip to content

Commit d684d7a

Browse files
committed
Update filled-area-plots.md
1 parent b7f12dd commit d684d7a

File tree

1 file changed

+42
-6
lines changed

1 file changed

+42
-6
lines changed

Diff for: doc/python/filled-area-plots.md

+42-6
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ jupyter:
66
extension: .md
77
format_name: markdown
88
format_version: '1.3'
9-
jupytext_version: 1.14.1
9+
jupytext_version: 1.16.1
1010
kernelspec:
11-
display_name: Python 3
11+
display_name: Python 3 (ipykernel)
1212
language: python
1313
name: python3
1414
language_info:
@@ -20,7 +20,7 @@ jupyter:
2020
name: python
2121
nbconvert_exporter: python
2222
pygments_lexer: ipython3
23-
version: 3.8.8
23+
version: 3.10.11
2424
plotly:
2525
description: How to make filled area plots in Python with Plotly.
2626
display_as: basic
@@ -80,13 +80,11 @@ fig = px.area(df, x="medal", y="count", color="nation",
8080
fig.show()
8181
```
8282

83-
<!-- #region tags=[] -->
8483
### Filled area chart with plotly.graph_objects
8584

8685
#### Basic Overlaid Area Chart
87-
<!-- #endregion -->
8886

89-
```python tags=[]
87+
```python
9088
import plotly.graph_objects as go
9189

9290
fig = go.Figure()
@@ -131,6 +129,44 @@ fig.add_trace(go.Scatter(
131129
fig.show()
132130
```
133131

132+
#### Gradient Fill
133+
134+
*New in 5.20*
135+
136+
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'`).
137+
138+
In the following example, we've defined a `horizontal` `fillgradient` with a colorscale of three colors.
139+
140+
```python
141+
import plotly.graph_objects as go
142+
143+
fig = go.Figure(
144+
[
145+
go.Scatter(
146+
x=[1, 2, 3, 4],
147+
y=[3, 4, 8, 3],
148+
fill=None,
149+
mode="lines",
150+
line_color="indigo",
151+
),
152+
go.Scatter(
153+
x=[1, 2, 3, 4],
154+
y=[1, 6, 2, 6],
155+
fill="tonexty",
156+
mode="lines",
157+
line_color="indigo",
158+
fillgradient=dict(
159+
type="horizontal",
160+
colorscale=[[0.0, "#FFB3BA"], [0.5, "#FFDFBA"], [1.0, "#BAE1FF"]],
161+
),
162+
),
163+
]
164+
)
165+
166+
fig.show()
167+
168+
```
169+
134170
#### Stacked Area Chart
135171

136172
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.

0 commit comments

Comments
 (0)