Animated, grouped, stacked, percent, and zoomable WebGPU column charts powered by ChartGPU.
Basic Chart
DesktopMobile
Installation
$ pnpm dlx shadcn@latest add @chartcn/bar-chart
Usage
import {
ChartcnBarChart,
type ChartConfig,
} from "@/components/chart/bar-chart";<ChartcnBarChart config={chartConfig} data={data} xDataKey="month">
<ChartcnBarChart.Grid />
<ChartcnBarChart.XAxis dataKey="month" />
<ChartcnBarChart.Brush />
<ChartcnBarChart.Legend />
<ChartcnBarChart.Tooltip />
<ChartcnBarChart.Bar dataKey="desktop" radius={5} />
<ChartcnBarChart.Bar dataKey="mobile" radius={5} />
</ChartcnBarChart>Examples
Stacked columns
stackType='stacked'
DesktopMobile
Percent columns
stackType='percent'
DesktopMobile
Loading state
isLoading='true'
DesktopMobile
Loading
API Reference
ChartcnBarChart
| Prop | Type | Default |
|---|---|---|
data | Data[] | required |
config | ChartConfig | required |
children | ReactNode | - |
xDataKey | string | - |
stackType | "default" | "stacked" | "expanded" | "percent" | "default" |
animation | boolean | AnimationConfig | { duration: 650, easing: "cubicOut" } |
isLoading | boolean | false |
showBrush | boolean | false |
onBrushChange | ({ startIndex: number; endIndex: number }) => void | - |
Bar
| Prop | Type | Default |
|---|---|---|
dataKey | string | required |
radius | number | 4 |
barWidth | number | string | - |
stackId | string | "chartcn" |
Shared parts
Grid, XAxis, YAxis, Brush, Legend, and Tooltip accept the concrete props documented by the Line Chart.