Area chart
Show the amount over time with a filled series.
Usage
Place Area inside Plot. The fill extends to zero and fades toward the baseline.
Multiple areas overlap on the same scale. They are not stacked; use grouped bars when overlap would obscure the comparison.
One series
Replay preview Full screen Code
Revenue
| month | Revenue |
|---|---|
| Jan | 186 |
| Feb | 242 |
| Mar | 218 |
| Apr | 304 |
| May | 286 |
| Jun | 372 |
Overlapping series
Replay preview Full screen Code
Desktop Mobile
| month | Desktop | Mobile |
|---|---|---|
| Jan | 186 | 120 |
| Feb | 242 | 150 |
| Mar | 218 | 180 |
| Apr | 304 | 220 |
| May | 286 | 240 |
Changing values
Replay preview Full screen Code
Orders
| month | Orders |
|---|---|
| April | 170 |
| May | 280 |
| June | 210 |
Continuous motion
Replay preview Full screen Code
Revenue
| month | Revenue |
|---|---|
| Jan | 186 |
| Feb | 242 |
| Mar | 218 |
| Apr | 304 |
| May | 286 |
| Jun | 372 |
Data and animation states
Full screen Code
Orders
| month | Orders |
|---|---|
| April | 48 |
| May | 72 |
| June | 61 |
API reference
See the shared API reference for every part and prop.