Components / Data display / Line chart
D6 · Data display
Line chart
An area series with a range control and an end-value tag.
<div class="c-seg" role="radiogroup" aria-label="Range">
<button type="button" role="radio" data-range="1D" aria-checked="false">1D</button>
<button type="button" role="radio" data-range="1M" aria-checked="true">1M</button>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A measure moves across a named range.
- The latest value should sit on the line.
When not to use
- There is no time axis.
- Readers need each row’s fields. Use the table.
Usage
<div class="c-seg" role="radiogroup" aria-label="Range">
<button type="button" role="radio" data-range="1D" aria-checked="false">1D</button>
<button type="button" role="radio" data-range="1M" aria-checked="true">1M</button>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data-range | 1D, 1M, YTD, 1Y | 1M | Which series is visible. |
| end tag | number | last point | Drawn at the end of the line. |
| fill | flat mix | — | Area uses a flat accent mix, not a gradient. |
Keyboard
| Key | Action |
|---|---|
| ArrowLeft / ArrowRight | Changes the range. |
| Enter | Opens the Values disclosure. |
Accessibility
- The control is a radiogroup named Range.
- The svg exposes the end value.
- Values lists every point in the visible series.
Motion
- Switching range replaces the series. No path draw animation.
Pattern origin
Pattern type: a time-range chart with an end value.