LineChart
Multi-series line chart with smooth curves, gridlines, and x/y axis labels.
Basic usage
Data is passed via props; pure SVG rendering with no third-party chart library.
Colors come from the --viz-1..8 tokens and are color-blind friendly.
<CfLineChart ... /><CfLineChart ... />Smooth curves
smooth = true uses Catmull-Rom-style cubic Bezier curves with a tension of 0.2 from neighbor differences,
without overshooting (no “half-circle” bulges at corners).
smooth = false
smooth = true（Catmull-Rom）
<CfLineChart :series="series" smooth /><CfLineChart series={series} smooth />Multiple series
Up to 8 simultaneous series; colors cycle through --viz-1..8.
<CfLineChart :series="series" smooth /><CfLineChart series={series} smooth />API
| Prop | Type | Default | Description |
|---|---|---|---|
series | LineSeries[] | — | { name?, data: number[] }[] |
labels | string[] | auto 0..n-1 | x-axis labels |
width / height | number | 480 / 240 | |
smooth | boolean | false | Smooth curves |
showGrid / showLabels | boolean | true | |
yLabelFn | (v) => string | v.toFixed(0) | y-axis label formatter |
反馈与讨论
LineChart · Discussion