Skip to content

Commit

Permalink
Update filled-area-plots.md
Browse files Browse the repository at this point in the history
  • Loading branch information
LiamConnors committed Mar 12, 2024
1 parent b7f12dd commit d684d7a
Showing 1 changed file with 42 additions and 6 deletions.
48 changes: 42 additions & 6 deletions doc/python/filled-area-plots.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit d684d7a

Please sign in to comment.