LineChart

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

SourcePackage @kerf-js/veneerTry it

Preview

tsx

import { LineChart } from '@kerf-js/veneer'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 @kerf-js/veneer

Try it

Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.

Live preview

Controls

Area

Zero

Direct

Codeupdates as you change the controls

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

Usage

tsx

import { LineChart } from '@kerf-js/veneer'

Area

area with zero fills down to a true baseline.

tsx

import { LineChart } from '@kerf-js/veneer'export function Area() {  return (  <LineChart    title="Monthly bill"    description={description}    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' },]const description =  'Filled to zero, so the height means something'

Direct labels

direct names each line at its end.

tsx

import { LineChart } from '@kerf-js/veneer'export function Direct() {  return (  <LineChart    title="Requests by region"    description={description}    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' },]const description =  "Named at the line's end, no legend to look up"

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

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 }`.