Chart

Bar, line or area chart on the chart series colours, one y axis from zero.

The snippet an agent gets

import { Chart } from '@basiiik/ui';<Chart data={[{ month: 'Jan', revenue: 4200 }, { month: 'Feb', revenue: 4800 }]} xKey="month" series={[{ key: 'revenue', label: 'Revenue' }]} title="Revenue" />

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it ships.

Example values were filled in for the required props data, xKey, series, title: replace them with your own.
Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
No interaction states in Figma. In code the active x position follows the pointer and the arrow keys; View as table is a pressed toggle.
Storybook: Data display/Chart.

Install

npm install @basiiik/uiimport { Chart } from '@basiiik/ui';

Props

Prop	Type	Default
`type`	`"area" \| "line" \| "bar"`	`"bar"`
`data`	`Record<string, string \| number>[]`	`Required`
`xKey`	`string`	`Required`
`series`	`ChartSeries[]`	`Required`
`title`	`string`	`Required`
`description`	`string`	`–`
`height`	`number`	`–`
`formatValue`	`(value: number) => string`	`–`

Other props

Prop	What it does
`className` `string`

States. No interaction states in Figma. In code the active x position follows the pointer and the arrow keys; View as table is a pressed toggle.

Accessibility

Tab moves to the plot
Left and Right step through the x positions; Home and End go to the first and last
Each step announces every series' value at that position
Escape clears the reading
The View as table button swaps the plot for the same numbers as a table
The plot is a group (aria-roledescription "chart") named by the title and described by a summary of the type, the series and the number of points
The SVG is aria-hidden; values reach screen readers through the readout and the table
A legend lists the series for two or more; text never takes a series colour, so identity never rests on colour alone

Use it when

Comparing amounts across categories (bar)
Change over time for one to four measures (line, or area for one or two)
A dashboard panel next to Stat tiles

Do not use it when

A single headline number (use Stat)
Exact values people must read or copy (use Table)
Parts of a whole, or two measures of different units on one chart (use two charts)

Rules for agents

Pass data as one object per x position and series as { key, label }, in the order colours should be assigned
Give every chart a title; use description for the unit or what to notice
Pass formatValue for currency, percentages or units
Keep series to six at most; fold the rest into an Other series
Use type="bar" for categories and line or area for time

Avoid

Two y axes (two charts instead)
Colouring bars of one series by their value
Hard-coded colours instead of the chart tokens
A chart as the only place a number appears in a report

Colour tokens it reads

color.bg.surfacecolor.border.defaultcolor.border.subtlecolor.chart.series-1color.chart.series-2color.text.primarycolor.text.secondarycolor.text.tertiary

3 Figma variantsTry it in the live demo