Line Chart
Charts
Data Visualization
Smooth line charts with gradient fills for visualizing trends and time-series data.
Preview
Curved line chart with gradient fill
Productivity Trend
Tasks completed per week, 2025
+24.5%
JanMarMayJulSepNov
Simple Line Chart
Clean line without fill
User Activity
JanFebMarAprMayJunJulAugSepOctNovDec
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
data* | number[] | — | Array of data values |
labels | string[] | — | X-axis labels |
color | string | 'indigo-500' | Line color |
smooth | boolean | true | Use smooth Bezier curves |
showFill | boolean | true | Show gradient fill under line |
showPoints | boolean | true | Show data point circles |
showGrid | boolean | true | Show grid lines |
height | number | 256 | Chart height in pixels |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
// Line chart data
const data = [20, 35, 28, 45, 38, 52, 48, 60, 55, 68, 62, 75]
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', ...]
// Create smooth path with Bezier curves
const createSmoothPath = (data: number[]) => {
const points = data.map((value, i) => ({
x: (i / (data.length - 1)) * 100,
y: 100 - value,
}))
let path = `M ${points[0].x},${points[0].y}`
for (let i = 0; i < points.length - 1; i++) {
const xc = (points[i].x + points[i + 1].x) / 2
const yc = (points[i].y + points[i + 1].y) / 2
path += ` Q ${points[i].x},${points[i].y} ${xc},${yc}`
}
return path
}
// Render SVG chart
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
{/* Gradient fill */}
<path d={`${createSmoothPath(data)} L 100,100 L 0,100 Z`} fill="url(#gradient)" />
{/* Line */}
<path d={createSmoothPath(data)} fill="none" stroke="var(--color-indigo-500)" />
{/* Data points */}
{data.map((value, i) => (
<circle cx={(i / (data.length - 1)) * 100} cy={100 - value} r="1" />
))}
</svg>Features
Built-in functionality
- Smooth curves: Bezier curves for professional look
- Gradient fills: Area under line with gradient
- Grid lines: Optional dashed grid for alignment
- Data points: Visible circles at each data point
- Responsive: Scales with container size
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="img" for chart containeraria-label describes the data trendSVG elements are decorativeKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Line chart is not interactive |
Notes
- Provide data table alternative
- Trend indicator shows direction
- Consider announcing data summary