Line Chart
Plot continuous data as connected points. Ideal for time series, trends, and comparisons across a continuous axis.
Usage
import { LineChart } from "@chartts/react"
<LineChart
data={salesData}
x="month"
y="revenue"
curve="monotone"
area
className="h-64"
/>Props
| Prop | Type | Description |
|---|---|---|
| data | T[] | Array of data objects |
| x | keyof T | Key for the x-axis values |
| y | keyof T | (keyof T)[] | Key(s) for y-axis values. Pass an array for multi-line. |
| curve | 'linear' | 'monotone' | 'step' | 'natural' | Interpolation method between points. Default: 'monotone' |
| area | boolean | Fill area under the line. Default: false |
| dots | boolean | Show data point markers. Default: true |
| animate | boolean | Enable line draw animation. Default: true |
Features
- Multiple lines with automatic legend
- Area fill with gradient support
- Configurable curve interpolation
- Animated line drawing on mount
- Interactive tooltips with crosshair
- Zoom and pan support
Other Charts
Bar ChartArea ChartPie / Donut ChartScatter ChartBubble ChartRadar ChartCandlestick ChartWaterfall ChartFunnel ChartGauge ChartSparklineStacked Bar ChartHorizontal Bar ChartDonut ChartHeatmapBox PlotHistogramTreemapPolar ChartRadial Bar ChartLollipop ChartBullet ChartDumbbell ChartCalendar ChartCombo ChartSankey Diagram