Add the registry
Add the chartcn namespace to your components.json. Replace the hostname with this site's deployed URL when self-hosting.
{
"registries": {
"@chartcn": "https://chartcn.vercel.app/r/{name}.json"
}
}Install a chart
$ pnpm dlx 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:
$ pnpm dlx shadcn@latest add @chartcn/ex-gradient-colors-area-chart
Use it
"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
The shared EChart component uses SVG by default. Pass renderer="canvas" when you have very large datasets or many animated elements:
<EChart renderer="canvas" option={option} />Both renderers are explicitly registered because tree-shaken ECharts builds do not include one automatically.