Browse Components
Line Chart
Follow changes 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="line">
<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
Line patterns and marker shapes distinguish series alongside color and the data table.
View Data
| Month | New | Returning |
|---|---|---|
| Jan | 42 | 28 |
| Feb | 68 | 40 |
| Mar | 55 | 48 |
| Apr | 91 | 62 |
View Code
<figure class="chart" data-chart="line">
<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="line">
<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="line">
<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="line" 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="line"
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">
<script defer src="/library/assets/chart-core.js"></script>
<script defer src="/library/assets/line-chart.js"></script>11,213 bytes CSS including base · 11,352 bytes runtime JavaScript
Usage
Use an ordered sequence
Use lines for changes across ordered observations. Rows retain their source order and are equally spaced; dates are labels, not a continuous time axis. Use Bar Chart for unrelated categories.
Keep observations honest
Straight segments connect the supplied values. Missing and invalid values produce an explanation instead of being treated as zero or connected across a gap. A single value displays as a point. Empty charts retain their previous axes and category labels. For an initially empty chart, set data-chart-labels to a JSON array and data-chart-min/data-chart-max to the known range; the fallback range is 0–1. Only screen readers receive the empty-state message.
Reuse the chart foundation
Use the same semantic table, shared series colors, keyboard controls and refresh/destroy methods as Bar Chart. Load chart-core before the line renderer.
Keep data accessible
Keep the View Data table with full labels and values. Line patterns and point shapes supplement color. Hover, tap or focus a point to inspect it; arrows navigate and Escape dismisses the preview.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.