Display

Chart

Bar, stacked, line and area charts with a tooltip, keyboard reading and a table view.

import { Chart } from "@flinbu/seed";

Grouped bars

Token referencesTokens vs raw values in code, by week

Tokens
Raw values

import { Chart } from "@flinbu/seed";

  return <Chart className="w-full" title="Token references" description="Tokens vs raw values in code, by week" data={WEEKS} series={[{ key: "tokens", label: "Tokens" }, { key: "raw", label: "Raw values" }]} />;

Stacked

Components by status

Published
Draft
Deprecated

import { Chart } from "@flinbu/seed";

  return <Chart className="w-full" type="stacked" title="Components by status" data={[
{ x: "Web", published: 42, draft: 8, deprecated: 3 }, { x: "iOS", published: 31, draft: 12, deprecated: 1 }, { x: "Android", published: 28, draft: 9, deprecated: 4 }, { x: "Email", published: 12, draft: 3, deprecated: 0 },
  ]} series={[{ key: "published", label: "Published" }, { key: "draft", label: "Draft" }, { key: "deprecated", label: "Deprecated" }]} />;

Lines with end labels

AdoptionShare of components using tokens

import { Chart } from "@flinbu/seed";

  return <Chart className="w-full" type="line" labels="end" title="Adoption" description="Share of components using tokens" valueFormat={(v) => `${v}%`}
data={[{ x: "Mar", web: 61, ios: 48 }, { x: "Apr", web: 70, ios: 55 }, { x: "May", web: 76, ios: 63 }, { x: "Jun", web: 84, ios: 70 }, { x: "Jul", web: 90, ios: 78 }, { x: "Aug", web: 94, ios: 86 }]}
series={[{ key: "web", label: "Web" }, { key: "ios", label: "iOS" }]} />;

Area

Pluto credits used

import { Chart } from "@flinbu/seed";

  return <Chart className="w-full" type="area" title="Pluto credits used" data={WEEKS.map((w) => ({ x: w.x, credits: w.tokens * 4 }))} series={[{ key: "credits", label: "Credits" }]} height={200} />;

Use it for

Trends and comparisons over a few categories or weeks.

Use something else for

A single figure: use StatTile.
Two measures with different scales: two charts, never two y-axes.

Props

Prop	Type	Default	Description
`type`	`'bar''stacked''line''area'`	`'bar'`	Form.
`data`	`Record<string, numberstring>[]`	–	Rows.
`x`	`string`	`'x'`	Key for the horizontal axis.
`series`	`{ key, label?, color? }[]`	–	Stable order; palette in that order.
`title / description`	`ReactNode`	–	Caption.
`height`	`number`	`240`	Plot height (px).
`valueFormat / xFormat`	`(v) => string`	`compact`	Formatting.
`labels`	`'end'`	–	Direct labels.
`legend / toolbar`	`boolean`	`true`	Legend and table toggle.
`defaultView`	`'chart''table'`	`'chart'`	Start view.

Accessibility

Arrow keys, Home and End read each point aloud.
The table button shows the same data as a table.
Two or more series get a legend; text never uses the series color.