For the complete documentation index, see 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.
/
0
Sponsor

Installation

PreviousNext

Install ChartGPU or PixiJS chart components and blocks from the registry.

Prerequisites

A React project with Tailwind CSS set up. ChartGPU requires a WebGPU-capable browser. PixiJS uses WebGPU when available and falls back to WebGL.

Choose a renderer

Install the ChartGPU base for native WebGPU:

$ pnpm dlx shadcn@latest add @chartcn/chartgpu/area-chart

Install the equivalent PixiJS base for WebGPU with WebGL fallback:

$ pnpm dlx shadcn@latest add @chartcn/pixijs/area-chart

Usage

The renderer bases expose the same component API. This example uses ChartGPU:

import {
  ChartcnAreaChart,
  type ChartConfig,
} from "@/components/chart/area-chart";
 
const data = [
  { desktop: 186, mobile: 80, month: "Jan" },
  { desktop: 305, mobile: 200, month: "Feb" },
  { desktop: 237, mobile: 120, month: "Mar" },
];
 
const chartConfig = {
  desktop: {
    label: "Desktop",
    colors: { light: ["#2563eb"], dark: ["#60a5fa"] },
  },
  mobile: {
    label: "Mobile",
    colors: { light: ["#059669"], dark: ["#34d399"] },
  },
} satisfies ChartConfig;
 
export function TrafficChart() {
  return (
    <ChartcnAreaChart
      className="h-90 w-full"
      config={chartConfig}
      data={data}
      xDataKey="month"
    >
      <ChartcnAreaChart.Grid />
      <ChartcnAreaChart.XAxis dataKey="month" />
      <ChartcnAreaChart.Legend />
      <ChartcnAreaChart.Tooltip />
      <ChartcnAreaChart.Area dataKey="desktop" />
      <ChartcnAreaChart.Area dataKey="mobile" />
    </ChartcnAreaChart>
  );
}

For PixiJS, only the import path changes:

import {
  ChartcnAreaChart,
  type ChartConfig,
} from "@/components/chart/pixijs/area-chart";

Install a Block

chartcn ships complete blocks for both bases:

$ pnpm dlx shadcn@latest add @chartcn/chartgpu/monospace-bar-chart
$ pnpm dlx shadcn@latest add @chartcn/pixijs/monospace-bar-chart

Then render the block:

import { MonospaceBarChart } from "@/components/chart/monospace-bar-chart";
 
export function Dashboard() {
  return <MonospaceBarChart />;
}