Basic Chart
Installation
Usage
import {
ChartcnPieChart,
type ChartConfig,
} from "@/components/chart/pixijs/pie-chart";<ChartcnPieChart
config={chartConfig}
data={data}
dataKey="visitors"
nameKey="browser"
>
<ChartcnPieChart.Legend />
<ChartcnPieChart.Tooltip />
<ChartcnPieChart.Pie cornerRadius={5} />
</ChartcnPieChart>Examples
Donut
innerRadius={60}
Loading state
isLoading='true'
Loading
API Reference
ChartcnPieChart
| Prop | Type | Default |
|---|---|---|
data | Data[] | required |
config | ChartConfig | required |
dataKey | string | required |
nameKey | string | required |
children | ReactNode | - |
animation | boolean | AnimationConfig | { duration: 700, easing: "cubicOut" } |
isLoading | boolean | false |
Pie
| Prop | Type | Default |
|---|---|---|
innerRadius | number | string | 0 |
outerRadius | number | string | "76%" |
cornerRadius | number | 5 |
Legend
| Prop | Type | Default |
|---|---|---|
position | "top" | "bottom" | "left" | "right" | "bottom" |