Basic Chart
Installation
Usage
import {
ChartcnComposedChart,
type ChartConfig,
} from "@/components/chart/composed-chart";<ChartcnComposedChart config={chartConfig} data={data} xDataKey="month">
<ChartcnComposedChart.Grid />
<ChartcnComposedChart.XAxis dataKey="month" />
<ChartcnComposedChart.Brush />
<ChartcnComposedChart.Legend />
<ChartcnComposedChart.Tooltip />
<ChartcnComposedChart.Bar dataKey="revenue" />
<ChartcnComposedChart.Line dataKey="profit" strokeWidth={2.5} />
</ChartcnComposedChart>Examples
Loading state
isLoading='true'
Loading
API Reference
ChartcnComposedChart
| Prop | Type | Default |
|---|---|---|
data | Data[] | required |
config | ChartConfig | required |
xDataKey | string | - |
stackType | "default" | "stacked" | "expanded" | "percent" | "default" |
animation | boolean | AnimationConfig | { duration: 650, easing: "cubicOut" } |
isLoading | boolean | false |
Bar
| Prop | Type | Default |
|---|---|---|
dataKey | string | required |
radius | number | 4 |
barWidth | number | string | - |
stackId | string | "chartcn" |
Line
| Prop | Type | Default |
|---|---|---|
dataKey | string | required |
strokeWidth | number | 2.25 |
opacity | number | 1 |
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.