Browse Components
Area Chart
Show changes in magnitude across an ordered sequence.
Basic
Connect ordered observations with straight segments and visible points.
View Data
| Month | Signups |
|---|---|
| Jan | 42 |
| Feb | 68 |
| Mar | 55 |
| Apr | 91 |
| May | 76 |
| Jun | 104 |
View Code
<figure class="chart" data-chart="area">
<figcaption>
Monthly signups
</figcaption>
<details class="chart-data">
<summary>
View Data
</summary>
<div class="chart-data-scroll">
<table>
<caption>
Monthly signups — example data
</caption>
<thead>
<tr>
<th scope="col">
Month
</th>
<th scope="col">
Signups
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Jan
</th>
<td>
42
</td>
</tr>
<tr>
<th scope="row">
Feb
</th>
<td>
68
</td>
</tr>
<tr>
<th scope="row">
Mar
</th>
<td>
55
</td>
</tr>
<tr>
<th scope="row">
Apr
</th>
<td>
91
</td>
</tr>
<tr>
<th scope="row">
May
</th>
<td>
76
</td>
</tr>
<tr>
<th scope="row">
Jun
</th>
<td>
104
</td>
</tr>
</tbody>
</table>
</div>
</details>
</figure>Multiple series
Series overlap independently with translucent fills; values are not stacked.
View Data
| Month | New | Returning |
|---|---|---|
| Jan | 42 | 28 |
| Feb | 68 | 40 |
| Mar | 55 | 48 |
| Apr | 91 | 62 |
View Code
<figure class="chart" data-chart="area">
<figcaption>
New and returning customers
</figcaption>
<details class="chart-data">
<summary>
View Data
</summary>
<div class="chart-data-scroll">
<table>
<caption>
New and returning customers — example data
</caption>
<thead>
<tr>
<th scope="col">
Month
</th>
<th scope="col">
New
</th>
<th scope="col">
Returning
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Jan
</th>
<td>
42
</td>
<td>
28
</td>
</tr>
<tr>
<th scope="row">
Feb
</th>
<td>
68
</td>
<td>
40
</td>
</tr>
<tr>
<th scope="row">
Mar
</th>
<td>
55
</td>
<td>
48
</td>
</tr>
<tr>
<th scope="row">
Apr
</th>
<td>
91
</td>
<td>
62
</td>
</tr>
</tbody>
</table>
</div>
</details>
</figure>Positive and negative
A shared zero baseline makes changes above and below zero clear.
View Data
| Month | Net change |
|---|---|
| Jan | 24 |
| Feb | -16 |
| Mar | 0 |
| Apr | 38 |
| May | -9 |
View Code
<figure class="chart" data-chart="area">
<figcaption>
Monthly net change
</figcaption>
<details class="chart-data">
<summary>
View Data
</summary>
<div class="chart-data-scroll">
<table>
<caption>
Monthly net change — example data
</caption>
<thead>
<tr>
<th scope="col">
Month
</th>
<th scope="col">
Net change
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Jan
</th>
<td>
24
</td>
</tr>
<tr>
<th scope="row">
Feb
</th>
<td>
-16
</td>
</tr>
<tr>
<th scope="row">
Mar
</th>
<td>
0
</td>
</tr>
<tr>
<th scope="row">
Apr
</th>
<td>
38
</td>
</tr>
<tr>
<th scope="row">
May
</th>
<td>
-9
</td>
</tr>
</tbody>
</table>
</div>
</details>
</figure>Single observation
One observation remains visible as a point without inventing a trend.
View Data
| Month | Signups |
|---|---|
| Jan | 42 |
View Code
<figure class="chart" data-chart="area">
<figcaption>
Monthly signups
</figcaption>
<details class="chart-data">
<summary>
View Data
</summary>
<div class="chart-data-scroll">
<table>
<caption>
Monthly signups — example data
</caption>
<thead>
<tr>
<th scope="col">
Month
</th>
<th scope="col">
Signups
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Jan
</th>
<td>
42
</td>
</tr>
</tbody>
</table>
</div>
</details>
</figure>Right-to-left
The ordered sequence follows the reading direction; point values remain available.
View Data
| Month | Signups |
|---|---|
| Jan | 42 |
| Feb | 68 |
| Mar | 55 |
| Apr | 91 |
| May | 76 |
| Jun | 104 |
View Code
<figure class="chart" data-chart="area" dir="rtl">
<figcaption>
Monthly signups
</figcaption>
<details class="chart-data">
<summary>
View Data
</summary>
<div class="chart-data-scroll">
<table>
<caption>
Monthly signups — example data
</caption>
<thead>
<tr>
<th scope="col">
Month
</th>
<th scope="col">
Signups
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Jan
</th>
<td>
42
</td>
</tr>
<tr>
<th scope="row">
Feb
</th>
<td>
68
</td>
</tr>
<tr>
<th scope="row">
Mar
</th>
<td>
55
</td>
</tr>
<tr>
<th scope="row">
Apr
</th>
<td>
91
</td>
</tr>
<tr>
<th scope="row">
May
</th>
<td>
76
</td>
</tr>
<tr>
<th scope="row">
Jun
</th>
<td>
104
</td>
</tr>
</tbody>
</table>
</div>
</details>
</figure>Empty data
Keep the plotting area and its reserved height when observations are unavailable.
View Data
| Month | Signups |
|---|
View Code
<figure
class="chart"
data-chart="area"
data-chart-labels="["Jan","Feb","Mar","Apr","May","Jun"]"
data-chart-min="0"
data-chart-max="125"
>
<figcaption>
Monthly signups
</figcaption>
<details class="chart-data">
<summary>
View Data
</summary>
<div class="chart-data-scroll">
<table>
<caption>
Monthly signups — example data
</caption>
<thead>
<tr>
<th scope="col">
Month
</th>
<th scope="col">
Signups
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</details>
</figure>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/chart-core.css">
<link rel="stylesheet" href="/library/assets/line-chart.css">
<link rel="stylesheet" href="/library/assets/area-chart.css">
<script defer src="/library/assets/chart-core.js"></script>
<script defer src="/library/assets/line-chart.js"></script>
<script defer src="/library/assets/area-chart.js"></script>11,378 bytes CSS including base · 11,528 bytes runtime JavaScript
Usage
Use area for magnitude
The fill shows magnitude relative to zero across equally spaced ordered observations. Negative values fill toward the same baseline; no smoothing or extrapolation is applied.
Distinguish overlap from totals
Multiple series overlap independently and are not stacked or summed. Patterns and marker shapes supplement color; use Line Chart when fills obscure comparisons.
Reuse the shared chart system
Load chart-core, line-chart and area-chart in order. The same table, color tokens, keyboard controls, tooltips, refresh and destroy methods apply.
Keep context when empty
Empty charts retain previous axes and labels. Supply data-chart-labels and data-chart-min/data-chart-max for initially empty data. The data table remains available and a single observation remains a point.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.