LineChart
A trend over time for one or more measures on one axis. Pick it for daily or weekly series; add the previous period as a ghost line to compare, and annotations for releases or incidents.
- LineChart
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, LineChart
Visits, last 28 days1,407 visits on the last day; lowest 975, highest 1,822.
- Visits
- Previous 28 days
- Events
Use the arrow keys to read each day.
Visits by deviceMobile has no data for two days while tracking was paused.
- Desktop
- Mobile
- Tablet
Use the arrow keys to read each day.
Use the arrow keys to read each day.
Dark theme, LineChart
Visits, last 28 days1,407 visits on the last day; lowest 975, highest 1,822.
- Visits
- Previous 28 days
- Events
Use the arrow keys to read each day.
Visits by deviceMobile has no data for two days while tracking was paused.
- Desktop
- Mobile
- Tablet
Use the arrow keys to read each day.
Use the arrow keys to read each day.
High contrast theme, LineChart
Visits, last 28 days1,407 visits on the last day; lowest 975, highest 1,822.
- Visits
- Previous 28 days
- Events
Use the arrow keys to read each day.
Visits by deviceMobile has no data for two days while tracking was paused.
- Desktop
- Mobile
- Tablet
Use the arrow keys to read each day.
Use the arrow keys to read each day.
UsageLink to the section Usage
import { LineChart } from '@skribly/ui/charts'<LineChart
label="Visits, last 28 days"
description="1,602 visits yesterday, 22 % more than the period before."
keyboardHint="Use the arrow keys to read each day."
categories={days.map(longDate)}
axisLabels={days.map(shortDate)}
series={[
{ id: 'visits', label: 'Visits', values },
{ id: 'previous', label: 'Previous 28 days', values: before, ghost: true }
]}
annotations={[{ index: 14, label: 'Version 2.4 released' }]}
annotationsLabel="Releases"
table={{ trigger: 'Show as table', categoryHeader: 'Date', annotationHeader: 'Note' }}
/>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- A figure named by label and described by the summary.
- The plot is one tab stop: Left and Right (or Up and Down) move between points, Home and End jump to the ends, and each move is read through a polite live region with the date, every series and any note.
- Escape hides the tooltip, which also opens on hover and stays while the pointer is over the chart.
- Series differ by line pattern as well as colour, and the legend names them.
- The table lists every value.
- Gridlines, lines and labels use system colours in forced colours.
- The SVG redraws at the width of its box, so it reflows at 320 px and 400 % zoom.
This demo runs through axe in all three themes on every test run. See what the tests check.