Charts

LineChart

Trends over time for one or more series: nice y ticks, a hairline grid, optional area fill and monotone curves. Fills its container and thins x labels on narrow screens.

Usage

Use it for:

  • Continuous change over time (revenue, balance, burn-down).
  • Comparing 2–4 series over the same period.

Avoid it when:

  • Comparing categories: use BarChart.
  • Parts of a whole: use DonutChart.
  • A trend inside a table cell: use Sparkline.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

Revenue (area, curved)

$0$5,000$10,000$15,000$20,000$25,000W1W2W3W4W5W6W7W8W9W10W11W12
Use the arrow keys to read each value.
Weekly revenue, last 12 weeks
WeekRevenue
W1$12,400
W2$13,100
W3$12,800
W4$14,900
W5$15,600
W6$15,200
W7$17,300
W8$18,100
W9$17,600
W10$19,400
W11$20,800
W12$22,100

Income vs spending

Two series with explicit colors and a legend.

$0$2,000$4,000$6,000MayJunJulAugSepOct
Use the arrow keys to read each value.
Income and spending, May to October
MonthIncomeSpending
May$4,800$3,900
Jun$5,100$4,200
Jul$4,950$4,600
Aug$5,300$3,800
Sep$4,940$4,100
Oct$5,150$3,650

Account balance (axis hugs the data)

zeroBaseline={false}: a balance near $400K that moves a few percent would be a flat line on a zero-based axis.

$400,000$420,000$440,000$460,000Sep 7Sep 14Sep 21Sep 28Oct 5Oct 12
Use the arrow keys to read each value.
Operating balance, last 6 weeks
WeekBalance
Sep 7$402,300
Sep 14$411,900
Sep 21$408,200
Sep 28$423,700
Oct 5$431,500
Oct 12$445,800

API Reference

LineChart

Generic over the datum type.

PropTypeDefault
data
Datum[]
index
keyof Datum
series
{ key: string; label: string; color?: Color }[]
height
number
240
legend
boolean
series.length > 1
indexLabel
string
area
boolean
false
curved
boolean
false
zeroBaseline
boolean
true
label
string
valueFormat
(value: number) => string
grouped digits
className
string
style
CSSProperties
id
string

Accessibility

Keyboard:

  • Tab: focuses the chart (focus ring).
  • → / ↓ and ← / ↑: move to the next / previous data point and show its tooltip.
  • Home / End: first / last point. Escape: hide the tooltip.

ARIA and semantics:

  • The SVG is role="img" named by label, with a description of the keys.
  • A visually hidden <table> (caption = label) holds every value, formatted with valueFormat, for screen readers.
  • Keyboard moves are read by a polite live region ("Mar: Revenue $5,150, Spending $1,808").
  • Series are named in the legend, tooltip and table, so color is never the only key.
  • The entrance animation does not play under reduced motion; the chart renders in its final state on the server.
© 2026 Motion. Internal documentation.