LineChart

Shows how values change over time, with an optional filled area, notes and target lines.

SourcePackage @weft-js/warpPlayground

Preview

tsx

import { LineChart } from '@weft-js/warp'export function Requests() {  return (    <LineChart title="Requests by region" description="Millions a month" data={REQUESTS_BY_REGION} x="month" xName="Month" series={REGION_LINES} format={millions} annotations={LAUNCH} references={TARGET} />  )}const TRAFFIC = [  { month: 'Nov', requests: 41.2, errors: 0.42, deploys: 88, cost: 6120 },  { month: 'Dec', requests: 52.8, errors: 0.51, deploys: 74, cost: 6480 },  { month: 'Jan', requests: 47.1, errors: 0.38, deploys: 96, cost: 6390 },  { month: 'Feb', requests: 49.6, errors: 0.33, deploys: 104, cost: 6710 },  { month: 'Mar', requests: 58.3, errors: 0.47, deploys: 118, cost: 7240 },  { month: 'Apr', requests: 61.9, errors: 0.29, deploys: 126, cost: 7380 },  { month: 'May', requests: 66.4, errors: 0.31, deploys: 131, cost: 7690 },  { month: 'Jun', requests: 64.2, errors: 0.44, deploys: 122, cost: 7620 },  { month: 'Jul', requests: 71.5, errors: 0.27, deploys: 139, cost: 8010 },  { month: 'Aug', requests: 74.8, errors: 0.25, deploys: 144, cost: 8230 },  { month: 'Sep', requests: 79.3, errors: 0.36, deploys: 152, cost: 8560 },  { month: 'Oct', requests: 86.1, errors: 0.22, deploys: 167, cost: 8930 },]const REQUESTS_BY_REGION = TRAFFIC.map((t, i) => ({  month: t.month,  euWest: Math.round(t.requests * (0.42 - i * 0.003) * 10) / 10,  usEast: Math.round(t.requests * (0.3 + (i % 3) * 0.006) * 10) / 10,  apSouth: Math.round(t.requests * (0.1 + i * 0.006) * 10) / 10,}))const millions = (v: number) => `${v}M`const REGION_LINES = [{ key: 'euWest', name: 'eu-west' }, { key: 'usEast', name: 'us-east' }, { key: 'apSouth', name: 'ap-south' }]const LAUNCH = [{ x: 'Jul', label: 'Edge cache launch' }]const TARGET = [{ y: 36, label: 'Capacity plan' }]

Installation

npm install @weft-js/warp

Usage

tsx

import { LineChart } from '@weft-js/warp'<LineChart title="Requests by region" description="Millions a month" data={REQUESTS_BY_REGION} x="month" xName="Month" series={REGION_LINES} format={millions} annotations={LAUNCH} references={TARGET} />

Area

area with zero fills down to a true baseline.

tsx

import { LineChart } from '@weft-js/warp'export function Area() {  return (    <LineChart title="Monthly bill" description="Filled to zero, so the height means something" data={TRAFFIC} x="month" xName="Month" series={COST_LINE} format={dollars} axisFormat={thousands} area zero />  )}const TRAFFIC = [  { month: 'Nov', requests: 41.2, errors: 0.42, deploys: 88, cost: 6120 },  { month: 'Dec', requests: 52.8, errors: 0.51, deploys: 74, cost: 6480 },  { month: 'Jan', requests: 47.1, errors: 0.38, deploys: 96, cost: 6390 },  { month: 'Feb', requests: 49.6, errors: 0.33, deploys: 104, cost: 6710 },  { month: 'Mar', requests: 58.3, errors: 0.47, deploys: 118, cost: 7240 },  { month: 'Apr', requests: 61.9, errors: 0.29, deploys: 126, cost: 7380 },  { month: 'May', requests: 66.4, errors: 0.31, deploys: 131, cost: 7690 },  { month: 'Jun', requests: 64.2, errors: 0.44, deploys: 122, cost: 7620 },  { month: 'Jul', requests: 71.5, errors: 0.27, deploys: 139, cost: 8010 },  { month: 'Aug', requests: 74.8, errors: 0.25, deploys: 144, cost: 8230 },  { month: 'Sep', requests: 79.3, errors: 0.36, deploys: 152, cost: 8560 },  { month: 'Oct', requests: 86.1, errors: 0.22, deploys: 167, cost: 8930 },]const dollars = (v: number) => `$${v.toLocaleString('en-US')}`const thousands = (v: number) => `$${(v / 1000).toFixed(1)}k`const COST_LINE = [{ key: 'cost', name: 'Monthly bill' }]

Direct labels

direct names each line at its end.

tsx

import { line } from '@weft-js/warp-core/charts'import { LineChart } from '@weft-js/warp'export function Direct() {  return (    <LineChart title="Requests by region" description="Named at the line's end, no legend to look up" data={REQUESTS_BY_REGION} x="month" xName="Month" series={REGION_LINES} format={millions} direct />  )}const TRAFFIC = [  { month: 'Nov', requests: 41.2, errors: 0.42, deploys: 88, cost: 6120 },  { month: 'Dec', requests: 52.8, errors: 0.51, deploys: 74, cost: 6480 },  { month: 'Jan', requests: 47.1, errors: 0.38, deploys: 96, cost: 6390 },  { month: 'Feb', requests: 49.6, errors: 0.33, deploys: 104, cost: 6710 },  { month: 'Mar', requests: 58.3, errors: 0.47, deploys: 118, cost: 7240 },  { month: 'Apr', requests: 61.9, errors: 0.29, deploys: 126, cost: 7380 },  { month: 'May', requests: 66.4, errors: 0.31, deploys: 131, cost: 7690 },  { month: 'Jun', requests: 64.2, errors: 0.44, deploys: 122, cost: 7620 },  { month: 'Jul', requests: 71.5, errors: 0.27, deploys: 139, cost: 8010 },  { month: 'Aug', requests: 74.8, errors: 0.25, deploys: 144, cost: 8230 },  { month: 'Sep', requests: 79.3, errors: 0.36, deploys: 152, cost: 8560 },  { month: 'Oct', requests: 86.1, errors: 0.22, deploys: 167, cost: 8930 },]const REQUESTS_BY_REGION = TRAFFIC.map((t, i) => ({  month: t.month,  euWest: Math.round(t.requests * (0.42 - i * 0.003) * 10) / 10,  usEast: Math.round(t.requests * (0.3 + (i % 3) * 0.006) * 10) / 10,  apSouth: Math.round(t.requests * (0.1 + i * 0.006) * 10) / 10,}))const millions = (v: number) => `${v}M`const REGION_LINES = [{ key: 'euWest', name: 'eu-west' }, { key: 'usEast', name: 'us-east' }, { key: 'apSouth', name: 'ap-south' }]

When to use

Use it for

The shape of the trend is the point
Several series share one time axis

Reach for something else

BarChart, when you compare separate categories
Sparkline, when it is a small hint beside a number

Playground

Area

Zero

Direct

import { LineChart } from '@weft-js/warp'<LineChart title="Requests by region" data={REQUESTS_BY_REGION} x="month" series={REGIONS} />

Accessibility

Moving along the plot reads the nearest month for every series in the tooltip.
The same numbers are one press away in the table view.

API Reference

Prop	Type	Default	Description
`title`	`string`	—	The heading.
`level`	`2 \| 3 \| 4 \| 6 \| 5`	—	The title's heading level: one below the heading the chart sits under. Default 3, a chart in a page section.
`description`	`unknown`	—	One supporting line under the title.
`toolbar`	`unknown`	—	Beside the view toggle: a layout switch, a range picker.
`state`	`"error" \| "loading" \| "empty"`	—	Replaces the plot, in the same frame. With no data the frame shows `empty` on its own.
`loading`	`string`	—	Shows that work is under way.
`empty`	`{ title: string; detail?: unknown; }`	—	The title and detail shown in place of the plot when there is no data.
`error`	`{ title: string; detail?: unknown; }`	—	A message that marks the field invalid and says why.
`action`	`unknown`	—	The next step under an empty or error state: a Retry button.
`data`	`object[]`	—	The series to draw.
`summary`	`string \| ((c: { data: object[]; title: string; }) => string)`	—	One sentence for screen readers and the page; generated from the data when absent.
`x`	`string`	—	The key in each row that names the point on the x axis.
`series`	`SeriesDef[]`	—	The keys to draw, each a string or `{ key, name, color }`.
`format`	`Fmt`	—	Turns a value into the text shown.
`axisFormat`	`Fmt`	—	A shorter format for the axis alone.
`xName`	`string`	—	What the x values are, for the table and tooltips.
`area`	`boolean`	`false`	Fills under each line.
`zero`	`boolean`	`false`	Starts the y axis at zero.
`direct`	`boolean`	`false`	Labels the lines at their ends instead of in a legend.
`headroom`	`number`	—	Extra space above the highest value, as a share.
`annotations`	`Annotation[]`	—	Notes pinned to an x value: `{ x, label }`.
`references`	`Reference[]`	—	Horizontal lines: `{ y, label }`.