Chart

Line, area and bar (grouped or stacked) charts in SVG with a colorblind-validated eight-color palette that keeps each series' color. Crosshair tooltip listing every series, arrow-key readout, legend that hides series, direct end labels, a table view, and spring transitions between data.

npx @kznlabs/labsui add chart

Revenue by channel
month	Web	App	Partners
Jan	$4,200	$2,400	$1,100
Feb	$4,600	$2,900	$1,200
Mar	$5,100	$3,100	$1,500
Apr	$4,800	$3,600	$1,400
May	$5,600	$4,100	$1,900
Jun	$6,200	$4,300	$2,100
Jul	$5,900	$4,900	$2,300
Aug	$6,500	$5,400	$2,200

import { Chart } from "@/components/ui/chart";const revenue = [  { month: "Jan", web: 4200, app: 2400 },  { month: "Feb", web: 4600, app: 2900 },  { month: "Mar", web: 5100, app: 3100 },  { month: "Apr", web: 4800, app: 3600 },];// Server-safe to render: every prop is plain data.export function RevenueChart() {  return (    <Chart      type="bar"      stacked      label="Revenue by channel"      data={revenue}      index="month"      series={[        { key: "web", label: "Web" },        { key: "app", label: "App" },      ]}      format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}    />  );}

<Chart>

Line, area and bar charts in SVG with the categorical --chart-1 to --chart-8 palette: crosshair tooltip listing every series (arrow keys too), legend that hides series, direct end labels, and a table view. Props are serializable, so server pages can render it.

data*
Record<string, string | number>[]
One object per x value: the index key plus one key per series.
index*
string
Key of the x value (category label) in each row.
label*
string
Names the chart for assistive tech and captions the table view.
series*
ChartSeries[]
At most eight: past that, fold the tail into "Other" or split the chart.
format
NumberFormatOptions
Value format, e.g. { style: "currency", currency: "USD" }. Axis ticks add compact notation.
heightdefault 240
number
Plot height in px.
localedefault "en-US"
string
BCP 47 locale for axis and tooltip numbers.
stackeddefault false
boolean
Bars only: stack the series instead of grouping them.
typedefault "line"
"line" | "area" | "bar"
Mark: lines, filled areas or bars.

Prop	Type	Default
`data*` One object per x value: the `index` key plus one key per series.	`Record<string, string \| number>[]`	—
`index*` Key of the x value (category label) in each row.	`string`	—
`label*` Names the chart for assistive tech and captions the table view.	`string`	—
`series*` At most eight: past that, fold the tail into "Other" or split the chart.	`ChartSeries[]`	—
`format` Value format, e.g. `{ style: "currency", currency: "USD" }`. Axis ticks add compact notation.	`NumberFormatOptions`	—
`height` Plot height in px.	`number`	`240`
`locale` BCP 47 locale for axis and tooltip numbers.	`string`	`"en-US"`
`stacked` Bars only: stack the series instead of grouping them.	`boolean`	`false`
`type` Mark: lines, filled areas or bars.	`"line" \| "area" \| "bar"`	`"line"`

Also accepts every <figure> prop.

type ChartSeries: { key: string; label: string; color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8; }

* required. Every component also takes className.