# Chart

- Page: <https://kznlabs.github.io/labsUI/components/chart>

## Chart (`chart`, component)

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.

- Install: `npx @kznlabs/labsui add chart`
- Docs: <https://kznlabs.github.io/labsUI/components/chart>
- Brings: button, button-variants, overflow-focus, table, use-dismiss, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Chart>` (+ <figure> props): 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.
  - `height?: number` = `240`: Plot height in px.
  - `locale?: string` = `"en-US"`: BCP 47 locale for axis and tooltip numbers.
  - `stacked?: boolean` = `false`: Bars only: stack the series instead of grouping them.
  - `type?: "line" | "area" | "bar"` = `"line"`: Mark: lines, filled areas or bars.

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

### Usage

```tsx
<Chart type="line" label="Revenue by channel" data={rows} index="month" series={[{ key: "web", label: "Web" }, { key: "app", label: "App" }]} format={{ style: "currency", currency: "USD" }} />
```

### Example: revenue-chart.tsx

```tsx
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 }}
    />
  );
}
```