> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nemu.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# Charts

> Render bar, line, area, pie, and donut charts as native vector graphics

Charts render as native vector graphics with no image step. A `chart` block carries the
kind, the data, and a few display options.

```ts theme={null}
{ type: "chart", chart: ChartKind, data: ChartData, height?: number, title?: string, legend?: boolean, style?: StyleProperties }
```

## Chart data

```ts theme={null}
type ChartKind = "bar" | "line" | "area" | "pie" | "donut";

interface ChartSeries { name?: string; values: number[]; color?: ColorLike }
interface ChartSlice  { label: string; value: number; color?: ColorLike }
interface ChartData   { labels?: string[]; series?: ChartSeries[]; slices?: ChartSlice[] }
```

The data shape depends on the kind.

<CardGroup cols={2}>
  <Card title="bar, line, area" icon="chart-column">
    Read `labels` and `series`. Each series is a named set of values.
  </Card>

  <Card title="pie, donut" icon="chart-pie">
    Read `slices`. Each slice is a labeled value.
  </Card>
</CardGroup>

## Bar chart with two series

```ts theme={null}
{
  type: "chart",
  chart: "bar",
  title: "Revenue by quarter",
  legend: true,
  height: 220,
  data: {
    labels: ["Q1", "Q2", "Q3", "Q4"],
    series: [
      { name: "2024", values: [12, 19, 14, 23], color: "#111827" },
      { name: "2025", values: [16, 22, 20, 28], color: "#9ca3af" },
    ],
  },
}
```

## Donut chart with slices

```ts theme={null}
{
  type: "chart",
  chart: "donut",
  data: { slices: [
    { label: "Direct", value: 45 },
    { label: "Partner", value: 30 },
    { label: "Online", value: 25 },
  ] },
}
```

<Note>
  Series and slice colors accept a hex string or a `Color`, since `ColorLike = string | Color`.
  See [Color](/packages/pdf/color) for building and converting colors.
</Note>