Line Chart
Charts
Data Visualization
Smooth line charts with gradient fills for visualizing trends, comparisons, and time-series data.
Preview
Curved line chart with gradient fill and trend indicator
Revenue Trend
Monthly revenue, 2025
+24.5%
JanMarMayJulSepNov
Multi-line Comparison
Compare two datasets with distinct colors
Comparison
This year vs last year
2025
2024
JanFebMarAprMayJunJulAugSepOctNovDec
Simple Line
Clean minimal line without fill
User Activity
View details
JanFebMarAprMayJunJulAugSepOctNovDec
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
data* | number[] | Series[] | — | Single data array or multiple series for comparison |
labels | string[] | — | X-axis labels |
color | string | 'indigo-500' | Primary line color (CSS variable) |
smooth | boolean | true | Use smooth Bezier curves |
showFill | boolean | true | Show gradient area fill under line |
showPoints | boolean | true | Show data point circles |
showGrid | boolean | true | Show horizontal grid lines |
showYAxis | boolean | true | Show Y-axis labels |
height | number | 256 | Chart height in pixels |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
import { LineChart } from '@/blocks/charts/line-chart'
// Single line with gradient fill<LineChart data={[20, 35, 28, 45, 38, 52]} labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']} color="var(--color-indigo-500)" showFill showPoints/>
// Multi-line comparison<LineChart data={[ { label: '2025', values: [20, 35, 45, 52, 68, 75], color: 'var(--color-indigo-500)' }, { label: '2024', values: [15, 22, 30, 40, 42, 60], color: 'var(--color-teal-500)' }, ]} labels={months} showGrid showYAxis/>Features
Built-in functionality
- Smooth curves: Bezier curves for a polished, professional look
- Gradient fills: Subtle gradient area fill under the line
- Multi-line: Compare multiple datasets with distinct colors
- Y-axis labels: Optional scale labels for reference
- Data points: Visible circles with white fill at each point
- Grid lines: Optional dashed grid for visual alignment
- Trend indicators: Percentage badges showing growth or decline
- Dark mode: Full dark mode support with proper contrast
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 by default |
Notes
- Provide a data table alternative for complex charts
- Trend indicator communicates direction via text
- Color is supplemented by text labels in legend