Line Chart
Charts
Data Visualization
Interactive
Smooth line charts with gradient fills for visualizing trends, comparisons, and time-series data. Supports multi-series and interactive hover tooltips.
Preview
Curved line chart with gradient fill and trend indicator
Revenue Trend
Monthly revenue, 2025
+24.5%
JanFebMarAprMayJunJulAugSepOctNovDec
Interactive Chart
Hover over the chart to see X and Y values at each point
Sales by Month
Hover to inspect values
JanFebMarAprMayJunJulAugSepOctNovDec
Multi-line Comparison
Compare datasets with distinct colors and an interactive tooltip
Year over Year
2025 vs 2024
2025
2024
JanFebMarAprMayJunJulAugSepOctNovDec
Simple Line
Minimal line without grid or Y-axis labels
User Activity
View details
JanFebMarAprMayJunJulAugSepOctNovDec
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
data* | number[] | LineChartSeries[] | — | Single array of values, or multiple series for comparison |
labels | string[] | — | X-axis labels (one per data point) |
color | string | 'var(--color-indigo-500)' | Primary line color (used when data is a single array) |
smooth | boolean | true | Use smooth Bezier curves |
showFill | boolean | true | Show gradient area fill under the line (single-series only) |
showPoints | boolean | true | Show data point circles |
showGrid | boolean | true | Show horizontal grid lines |
showYAxis | boolean | true | Show Y-axis labels |
showXAxis | boolean | true | Show X-axis labels (requires labels prop) |
yTicks | number | 4 | Number of Y-axis grid lines |
height | number | 256 | Chart height in pixels |
interactive | boolean | false | Enable hover crosshair and tooltip |
formatValue | (v: number) => string | — | Custom formatter for Y values |
formatLabel | (l: string, i: number) => string | — | Custom formatter for X labels |
ariaLabel | string | — | Accessible label for the chart |
className | string | — | Additional CSS classes |
LineChartSeries
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Series label shown in tooltip |
values* | number[] | — | Data points for this series |
color | string | — | Line color (CSS variable or hex) |
dashed | boolean | — | Render as a dashed line |
Usage
Import and implementation examples
import { LineChart } from '@/components/ui/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)"/>
// Interactive with custom value formatter<LineChart data={[20, 35, 28, 45, 38, 52]} labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']} interactive formatValue={(v) => `$${v}k`}/>
// 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)', dashed: true }, ]} labels={months} interactive/>Features
Built-in functionality
- Smooth curves: Bezier interpolation matches the Sparkline algorithm
- Gradient fills: Subtle gradient area fill under single-series lines
- Multi-line: Compare datasets with distinct colors and dashed styles
- Interactive tooltip: Hover crosshair with X label and Y values for every series
- Y-axis labels: Auto-generated tick labels with custom formatting
- Data points: Circles with white fill that adapt to dark mode
- Grid lines: Optional dashed grid for visual alignment
- Dark mode: Full dark mode support including tooltip and points
Accessibility
Accessibility considerations
ARIA Attributes
role="img" on chart containeraria-label describes chart contentsDecorative SVG elements use aria-hiddenKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Hover-only interactivity; keyboard support is roadmap |
Notes
- Provide a data table alternative for complex datasets
- Pair the chart with a descriptive heading and trend indicator
- Color is supplemented by labels in the tooltip and legend