Basic Chart
Installation
Usage
import {
ChartcnLineChart,
type ChartConfig,
} from "@/components/chart/line-chart";<ChartcnLineChart data={data} config={chartConfig} xDataKey="month">
<ChartcnLineChart.XAxis dataKey="month" />
<ChartcnLineChart.Brush />
<ChartcnLineChart.Legend />
<ChartcnLineChart.Tooltip />
<ChartcnLineChart.Line dataKey="desktop" strokeWidth={2.5} />
<ChartcnLineChart.Line dataKey="mobile" opacity={0.8} />
</ChartcnLineChart>Examples
Data transitions
Animated data updates
Step lines
curveType='step'
Loading state
isLoading='true'
Loading
API Reference
ChartcnLineChart
| Prop | Type | Default |
|---|---|---|
data | Data[] | required |
config | ChartConfig | required |
children | ReactNode | - |
xDataKey | string | - |
curveType | "linear" | "step" | "step-before" | "step-after" | "linear" |
animation | boolean | AnimationConfig | { duration: 650, easing: "cubicOut" } |
isLoading | boolean | false |
showBrush | boolean | false |
startIndex | number | - |
endIndex | number | - |
onBrushChange | ({ startIndex: number; endIndex: number }) => void | - |
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
XAxis
| Prop | Type | Default |
|---|---|---|
dataKey | string | - |
tickFormatter | (value: string, index?: number) => ReactNode | - |
YAxis
| Prop | Type | Default |
|---|---|---|
tickFormatter | (value: string, index?: number) => ReactNode | - |
Grid
| Prop | Type | Default |
|---|---|---|
horizontal | boolean | true |
vertical | boolean | true |
Brush
| Prop | Type | Default |
|---|---|---|
startIndex | number | - |
endIndex | number | - |
Legend
| Prop | Type | Default |
|---|---|---|
position | "top" | "bottom" | "left" | "right" | "bottom" |