Animated, stacked, stepped, and zoomable WebGPU and WebGL area charts powered by PixiJS.
Basic Chart
Installation
Usage
import {
ChartcnAreaChart,
type ChartConfig,
} from "@/components/chart/pixijs/area-chart";<ChartcnAreaChart
config={chartConfig}
data={data}
stackType="stacked"
xDataKey="month"
>
<ChartcnAreaChart.Grid />
<ChartcnAreaChart.XAxis dataKey="month" />
<ChartcnAreaChart.Brush />
<ChartcnAreaChart.Legend />
<ChartcnAreaChart.Tooltip />
<ChartcnAreaChart.Area dataKey="desktop" opacity={0.3} />
<ChartcnAreaChart.Area dataKey="mobile" opacity={0.3} />
</ChartcnAreaChart>Examples
Stack types
stackType='stacked'
stackType='expanded'
Step area
curveType='step'
Loading state
isLoading='true'
Loading
API Reference
ChartcnAreaChart
| Prop | Type | Default |
|---|---|---|
data | Data[] | required |
config | ChartConfig | required |
children | ReactNode | - |
xDataKey | string | - |
stackType | "default" | "stacked" | "expanded" | "percent" | "default" |
curveType | "linear" | "step" | "step-before" | "step-after" | "linear" |
animation | boolean | AnimationConfig | { duration: 650, easing: "cubicOut" } |
isLoading | boolean | false |
showBrush | boolean | false |
onBrushChange | ({ startIndex: number; endIndex: number }) => void | - |
Area
| Prop | Type | Default |
|---|---|---|
dataKey | string | required |
opacity | number | 0.28 |
strokeWidth | number | 2 |
stackId | string | "chartcn" |
curveType | "linear" | "step" | "step-before" | "step-after" | - |
connectNulls | boolean | false |
Shared parts
Grid, XAxis, YAxis, Brush, Legend, and Tooltip accept the concrete props documented by the Line Chart.