Charts
Line Chart
Build line charts with custom dots, labels, and multiple series
Line charts display data as a series of points connected by line segments.
Simple Line Chart
A basic line chart with a single series.
Multi-Line Chart
Add multiple <Line> components for multi-series charts.
Dashed Line Chart
Use stroke-dasharray for dashed lines.
Step Line Chart
Use type="step" for step-wise transitions.
Line Chart with Dots
Use the dot prop to show dots on every data point.
Line props
| Prop | Type | Default | Description |
|---|---|---|---|
dataKey | string | number | Function | required | Key from data |
type | CurveType | 'linear' | Curve type (monotone, step, natural, etc.) |
stroke | string | '#3182bd' | Line stroke color |
strokeWidth | number | 1 | Line width |
dot | boolean | object | false | Show dots on data points |
activeDot | boolean | object | true | Show active dot on hover |
connectNulls | boolean | false | Connect across null values |
hide | boolean | false | Hide the line |
isAnimationActive | boolean | true | Enable animation |