Getting Started
UI Library
- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
Line chart visualization built on Recharts for showing trends, time series data, and comparisons over time.
Basic Usage
Revenue Trends
Simple line chart showing revenue trends
Line Chart with Axis
Add X-axis labels to your chart for better context.
Monthly Revenue
Line chart with X-axis labels
Multiple Lines
Display multiple data series in a single chart.
Financial Overview
Multiple data series on one chart
Area Chart
Fill the area below the line to create an area chart.
Revenue Area Chart
Area chart with fill below the line
Variants
Choose from four visual styles: card, outline, ghost, or minimal.
Card Variant
Outline Variant
Ghost Variant
Minimal Variant
Full-Featured Example
All features enabled for a comprehensive visualization.
Comprehensive Analytics
Complete example with all features enabled
API Reference
LineChartItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, unknown>[] | - | Required. Array of data points to visualize |
config | ChartConfig | - | Required. Configuration object mapping data keys to labels and colors |
dataKeys | string[] | - | Specific data keys to display (defaults to all keys in config) |
xAxisKey | string | "name" | Data key to use for X-axis labels |
showGrid | boolean | true | Show/hide cartesian grid |
showXAxis | boolean | true | Show/hide X-axis |
showYAxis | boolean | false | Show/hide Y-axis |
showLegend | boolean | false | Show/hide legend |
showTooltip | boolean | true | Show/hide tooltip on hover |
lineType | "linear" | "monotone" | "step" | "stepBefore" | "stepAfter" | "monotone" | Type of line interpolation |
showDots | boolean | false | Show/hide data point markers |
dotSize | number | 4 | Size of data point markers in pixels |
strokeWidth | number | 2 | Width of the line stroke |
filled | boolean | false | Fill area below the line (area chart mode) |
connectNulls | boolean | false | Connect lines across null values |
title | string | - | Chart title |
description | string | - | Chart description |
variant | "card" | "outline" | "ghost" | "minimal" | "card" | Visual style variant |
size | "sm" | "md" | "lg" | "md" | Size preset |
height | number | string | - | Custom height override |
aspectRatio | "video" | "square" | "auto" | "video" | Aspect ratio preset |
onClick | () => void | - | Click handler for interactive charts |
ariaLabel | string | - | Custom accessibility label |
className | string | - | Additional CSS classes |
classNames | object | - | CSS classes for specific elements |
LineChartCollection Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | LineChartItemProps[] | - | Required. Array of chart configurations |
layout | "stack" | "grid" | "stack" | Layout mode |
columns | 1 | 2 | 3 | 1 | Number of columns (grid layout only) |
gap | "sm" | "md" | "lg" | "md" | Spacing between charts |
variant | "card" | "outline" | "ghost" | "minimal" | "card" | Default variant for all items |
size | "sm" | "md" | "lg" | "md" | Default size for all items |
onItemClick | (item, index) => void | - | Click handler receiving item and index |
className | string | - | Additional CSS classes |
ChartConfig Type
type ChartConfig = {
[key: string]: {
label?: React.ReactNode;
icon?: React.ComponentType;
color?: string;
theme?: Record<string, string>;
};
};