# Installation

Configure the chartcn registry and install an Apache ECharts chart.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



## Add the registry [#add-the-registry]

Add the chartcn namespace to your `components.json`. Replace the hostname with this site's deployed URL when self-hosting.

```json
{
  "registries": {
    "@chartcn": "https://chartcn.vercel.app/r/{name}.json"
  }
}
```

## Install a chart [#install-a-chart]

```bash
npx shadcn@latest add @chartcn/area-chart
```

The CLI installs the chart, its shared ECharts runtime, and the `echarts` package. Generated source lives under `components/chartcn`.

You can also install one of the complete examples:

```bash
npx shadcn@latest add @chartcn/ex-gradient-colors-area-chart
```

## Use it [#use-it]

```tsx
"use client";

import {
  ChartcnAreaChart,
  Area,
  Grid,
  Legend,
  Tooltip,
  XAxis,
} from "@/components/chartcn/charts/area-chart";
import type { ChartConfig } from "@/components/chartcn/ui/chart";

const data = [
  { month: "Jan", desktop: 186, mobile: 80 },
  { month: "Feb", desktop: 305, mobile: 200 },
  { month: "Mar", desktop: 237, mobile: 120 },
];

const config = {
  desktop: {
    label: "Desktop",
    colors: { light: ["#2563eb"], dark: ["#60a5fa"] },
  },
  mobile: {
    label: "Mobile",
    colors: { light: ["#059669"], dark: ["#34d399"] },
  },
} satisfies ChartConfig;

export function TrafficChart() {
  return (
    <ChartcnAreaChart data={data} config={config} xDataKey="month">
      <Grid />
      <XAxis dataKey="month" />
      <Tooltip />
      <Legend isClickable />
      <Area dataKey="desktop" variant="gradient" />
      <Area dataKey="mobile" variant="gradient" />
    </ChartcnAreaChart>
  );
}
```

## Renderer [#renderer]

The shared `EChart` component uses SVG by default. Pass `renderer="canvas"` when you have very large datasets or many animated elements:

```tsx
<EChart renderer="canvas" option={option} />
```

Both renderers are explicitly registered because tree-shaken ECharts builds do not include one automatically.