Browse Components
Sparkline
Show a compact trend beside a metric.
Basic
A compact trend without axes. Hover, tap or focus an observation to inspect its value.
View Data
| Day | Signups |
|---|---|
| Day 1 | 64 |
| Day 2 | 67 |
| Day 3 | 65 |
| Day 4 | 66 |
| Day 5 | 58 |
| Day 6 | 49 |
| Day 7 | 53 |
| Day 8 | 71 |
| Day 9 | 94 |
| Day 10 | 78 |
| Day 11 | 73 |
| Day 12 | 75 |
| Day 13 | 74 |
| Day 14 | 63 |
| Day 15 | 59 |
| Day 16 | 62 |
| Day 17 | 81 |
| Day 18 | 85 |
| Day 19 | 79 |
| Day 20 | 68 |
| Day 21 | 72 |
| Day 22 | 73 |
| Day 23 | 69 |
| Day 24 | 77 |
View Code
HTML
<figure class="chart" data-chart="sparkline">
<figcaption>
Signup trend
</figcaption>
<details class="chart-data">
<summary>
View Data
</summary>
<div class="chart-data-scroll">
<table>
<caption>
Signup trend — example data
</caption>
<thead>
<tr>
<th scope="col">
Day
</th>
<th scope="col">
Signups
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
Day 1
</th>
<td>
64
</td>
</tr>
<tr>
<th>
Day 2
</th>
<td>
67
</td>
</tr>
<tr>
<th>
Day 3
</th>
<td>
65
</td>
</tr>
<tr>
<th>
Day 4
</th>
<td>
66
</td>
</tr>
<tr>
<th>
Day 5
</th>
<td>
58
</td>
</tr>
<tr>
<th>
Day 6
</th>
<td>
49
</td>
</tr>
<tr>
<th>
Day 7
</th>
<td>
53
</td>
</tr>
<tr>
<th>
Day 8
</th>
<td>
71
</td>
</tr>
<tr>
<th>
Day 9
</th>
<td>
94
</td>
</tr>
<tr>
<th>
Day 10
</th>
<td>
78
</td>
</tr>
<tr>
<th>
Day 11
</th>
<td>
73
</td>
</tr>
<tr>
<th>
Day 12
</th>
<td>
75
</td>
</tr>
<tr>
<th>
Day 13
</th>
<td>
74
</td>
</tr>
<tr>
<th>
Day 14
</th>
<td>
63
</td>
</tr>
<tr>
<th>
Day 15
</th>
<td>
59
</td>
</tr>
<tr>
<th>
Day 16
</th>
<td>
62
</td>
</tr>
<tr>
<th>
Day 17
</th>
<td>
81
</td>
</tr>
<tr>
<th>
Day 18
</th>
<td>
85
</td>
</tr>
<tr>
<th>
Day 19
</th>
<td>
79
</td>
</tr>
<tr>
<th>
Day 20
</th>
<td>
68
</td>
</tr>
<tr>
<th>
Day 21
</th>
<td>
72
</td>
</tr>
<tr>
<th>
Day 22
</th>
<td>
73
</td>
</tr>
<tr>
<th>
Day 23
</th>
<td>
69
</td>
</tr>
<tr>
<th>
Day 24
</th>
<td>
77
</td>
</tr>
</tbody>
</table>
</div>
</details>
</figure>Positive and negative
The observed range determines the scale; a sparkline shows trend rather than distance from zero.
View Data
| Month | Net change |
|---|---|
| Jan | 18 |
| Feb | -7 |
| Mar | -22 |
| Apr | 9 |
| May | 31 |
| Jun | -4 |
View Code
HTML
<figure class="chart" data-chart="sparkline">
<figcaption>
Daily net change
</figcaption>
<details class="chart-data">
<summary>
View Data
</summary>
<div class="chart-data-scroll">
<table>
<caption>
Daily 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>
18
</td>
</tr>
<tr>
<th scope="row">
Feb
</th>
<td>
-7
</td>
</tr>
<tr>
<th scope="row">
Mar
</th>
<td>
-22
</td>
</tr>
<tr>
<th scope="row">
Apr
</th>
<td>
9
</td>
</tr>
<tr>
<th scope="row">
May
</th>
<td>
31
</td>
</tr>
<tr>
<th scope="row">
Jun
</th>
<td>
-4
</td>
</tr>
</tbody>
</table>
</div>
</details>
</figure>Flat trend
Equal values stay centered without inventing variation.
View Data
| Month | Signups |
|---|---|
| Jan | 50 |
| Feb | 50 |
| Mar | 50 |
| Apr | 50 |
| May | 50 |
| Jun | 50 |
View Code
HTML
<figure class="chart" data-chart="sparkline">
<figcaption>
Signup trend
</figcaption>
<details class="chart-data">
<summary>
View Data
</summary>
<div class="chart-data-scroll">
<table>
<caption>
Signup trend — 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>
50
</td>
</tr>
<tr>
<th scope="row">
Feb
</th>
<td>
50
</td>
</tr>
<tr>
<th scope="row">
Mar
</th>
<td>
50
</td>
</tr>
<tr>
<th scope="row">
Apr
</th>
<td>
50
</td>
</tr>
<tr>
<th scope="row">
May
</th>
<td>
50
</td>
</tr>
<tr>
<th scope="row">
Jun
</th>
<td>
50
</td>
</tr>
</tbody>
</table>
</div>
</details>
</figure>Single observation
One observation remains a visible point.
View Data
| Day | Signups |
|---|---|
| Jan | 42 |
View Code
HTML
<figure class="chart" data-chart="sparkline">
<figcaption>
Signup trend
</figcaption>
<details class="chart-data">
<summary>
View Data
</summary>
<div class="chart-data-scroll">
<table>
<caption>
Signup trend — example data
</caption>
<thead>
<tr>
<th scope="col">
Day
</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
Source order follows the reading direction.
View Data
| Month | Signups |
|---|---|
| Jan | 64 |
| Feb | 82 |
| Mar | 59 |
| Apr | 61 |
| May | 93 |
| Jun | 77 |
View Code
HTML
<figure class="chart" data-chart="sparkline" dir="rtl">
<figcaption>
Signup trend
</figcaption>
<details class="chart-data">
<summary>
View Data
</summary>
<div class="chart-data-scroll">
<table>
<caption>
Signup trend — 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>
64
</td>
</tr>
<tr>
<th scope="row">
Feb
</th>
<td>
82
</td>
</tr>
<tr>
<th scope="row">
Mar
</th>
<td>
59
</td>
</tr>
<tr>
<th scope="row">
Apr
</th>
<td>
61
</td>
</tr>
<tr>
<th scope="row">
May
</th>
<td>
93
</td>
</tr>
<tr>
<th scope="row">
Jun
</th>
<td>
77
</td>
</tr>
</tbody>
</table>
</div>
</details>
</figure>Empty data
The compact plot keeps its reserved height when there are no observations.
View Data
| Day | Signups |
|---|
View Code
HTML
<figure class="chart" data-chart="sparkline">
<figcaption>
Signup trend
</figcaption>
<details class="chart-data">
<summary>
View Data
</summary>
<div class="chart-data-scroll">
<table>
<caption>
Signup trend — example data
</caption>
<thead>
<tr>
<th scope="col">
Day
</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.
Add to your page
<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/sparkline.css">
<script defer src="/library/assets/chart-core.js"></script>
<script defer src="/library/assets/line-chart.js"></script>
<script defer src="/library/assets/sparkline.js"></script>12,098 bytes CSS including base · 14,307 bytes runtime JavaScript
Usage
Pair with context
Use a sparkline beside a metric, date range or caption. It intentionally omits axes. Hover, tap or use arrow keys to inspect exact values; the source table remains available without JavaScript.
Read the trend
The scale fits the observed minimum and maximum rather than forcing zero. Do not compare magnitudes across independently scaled sparklines. Straight segments preserve supplied observations; flat and single-value data remain honest.
Reuse the chart system
Chart Core owns parsing, validation, theme colors, keyboard navigation, previews, resizing and lifecycle. Use layoutCharts.refresh(root) after changing the source table and destroy(root) on removal.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.