Line ChartPro
Pro
A chart that connects data points with lines to show trends or changes over time.
Line Chart Playground
Line Chart Playground
Preview
Code
Organic Search
Social Media
Direct
Referral
Controls
Variant:
Curvy
Zig-Zag
Series:
1
2
3
4
Area:
Grid:
Tooltip:
Legend:
Installation
You can add the line chart component to your project manually:
1
Install the following dependencies:
npm
pnpm
yarn
bun
npm install class-variance-authority clsx tailwind-merge recharts2
Copy and paste the following code into your project.
Loading...
3
Update the import paths to match your project setup.
Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.
Basic Usage
A simple single-series line chart:
import {
ChartContainer,
VersaLineChart,
ChartLine,
ChartGrid,
ChartXAxis,
ChartYAxis,
ChartTooltip,
} from '@versaui/ui/components/Charts';
const data = [
{ month: 'Jan', revenue: 4200 },
{ month: 'Feb', revenue: 5800 },
{ month: 'Mar', revenue: 4900 },
{ month: 'Apr', revenue: 7200 },
{ month: 'May', revenue: 6100 },
{ month: 'Jun', revenue: 8400 },
];
<ChartContainer size="large" aria-label="Monthly revenue">
<VersaLineChart data={data} variant="curvy">
<ChartGrid horizontal />
<ChartXAxis dataKey="month" />
<ChartYAxis />
<ChartTooltip />
<ChartLine dataKey="revenue" color="primary" name="Revenue" showArea />
</VersaLineChart>
</ChartContainer>Multi-Series
Add multiple <ChartLine> children for multi-series line charts. Legend is auto-generated with horizontal-line indicators:
<ChartContainer size="large" aria-label="Trend analysis">
<VersaLineChart data={data} variant="curvy">
<ChartGrid horizontal />
<ChartXAxis dataKey="month" />
<ChartYAxis />
<ChartTooltip />
<ChartLine dataKey="organic" color="primary" name="Organic Search" showArea />
<ChartLine dataKey="social" color="secondary" name="Social Media" showArea />
<ChartLine dataKey="direct" color="tertiary" name="Direct" showArea />
<ChartLine dataKey="referral" color="quaternary" name="Referral" showArea />
</VersaLineChart>
</ChartContainer>Line Variants
Two curve styles matching the Figma design:
{/* Curvy — smooth flowing curves, premium analytics aesthetic */}
<VersaLineChart data={data} variant="curvy">
<ChartLine dataKey="revenue" showArea />
</VersaLineChart>
{/* Zig-zag — sharper directional transitions */}
<VersaLineChart data={data} variant="zigzag">
<ChartLine dataKey="revenue" showArea />
</VersaLineChart>Area Fills
Toggle area fills independently per series. Gradients are automatically generated from brand tokens:
{/* With area fill */}
<ChartLine dataKey="revenue" color="primary" name="Revenue" showArea />
{/* Without area fill — line only */}
<ChartLine dataKey="expenses" color="secondary" name="Expenses" />Chart Size
Two size variants match the Figma spec — large and medium:
{/* Large (default) — 16px corner-radius, generous padding */}
<ChartContainer size="large">
<VersaLineChart data={data} size="large">...</VersaLineChart>
</ChartContainer>
{/* Medium — 12px corner-radius, tighter padding */}
<ChartContainer size="medium">
<VersaLineChart data={data} size="medium">...</VersaLineChart>
</ChartContainer>Custom Tooltip
Override the tooltip content with a custom renderer:
import type { ChartTooltipPayload } from '@versaui/ui/components/Charts';
function CustomTooltip({ active, payload, label }: ChartTooltipPayload) {
if (!active || !payload?.length) return null;
return (
<div className="bg-white p-3 rounded shadow-lg border">
<p className="font-semibold">{label}</p>
{payload.map((entry) => (
<p key={entry.dataKey}>{entry.name}: {entry.value.toLocaleString()}</p>
))}
</div>
);
}
<ChartTooltip content={CustomTooltip} />Loading & Empty States
Built-in skeleton loading and empty data states:
{/* Loading state — shows animated skeleton */}
<ChartContainer size="large" loading>
<VersaLineChart data={[]}>...</VersaLineChart>
</ChartContainer>
{/* Empty state — shows "No data available" message */}
<ChartContainer size="large" empty>
<VersaLineChart data={[]}>...</VersaLineChart>
</ChartContainer>Accessibility
The Line Chart components are fully accessible:
- Screen readers: Chart container uses
role="img"with descriptivearia-label - Keyboard navigation: Legend items are focusable and toggleable with
Enter/Space - Reduced motion: Animations disabled when
prefers-reduced-motion: reduceis set - Active dot: Focus-visible markers appear on hovered data points
- Tooltips: Announced via
role="tooltip"with proper ARIA semantics
VersaLineChart Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | ChartDataPoint[] | — | Required. Array of data objects. |
variant | 'curvy' | 'zigzag' | 'curvy' | Line curve style. Curvy for smooth, zigzag for angular. |
size | 'large' | 'medium' | 'large' | Chart size variant. |
legend | boolean | true | Show auto-generated legend with horizontal-line markers. |
legendSize | 'default' | 'small' | auto | Legend size. Auto-derived from chart size. |
className | string | '' | Additional CSS classes. |
ChartLine Props
| Prop | Type | Default | Description |
|---|---|---|---|
dataKey | string | — | Required. Key in data for this line series. |
color | 'primary' | 'secondary' | 'tertiary' | 'quaternary' | auto | Brand color token. Auto-assigned from palette. |
name | string | dataKey | Human-readable name for legend/tooltip. |
showArea | boolean | false | Render a gradient area fill beneath the line. |
strokeWidth | number | 2 | Line stroke width in pixels. |
showActiveDot | boolean | true | Show active marker dot on hover. |
connectNulls | boolean | true | Connect through null/undefined data points. |
className | string | '' | Additional CSS classes. |
Shared Props
The Line Chart also accepts the shared chart primitives — ChartXAxis, ChartYAxis, ChartGrid, ChartTooltip, and ChartLegend. See the Bar Chart documentation for their props.