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
Bar chart visualization built on Recharts with configurable axes, tooltips, legends, and multiple visual variants.
Basic Usage
User Analytics
Simple bar chart showing desktop and mobile users
Bar Chart with Axis
Add X-axis labels to your chart for better context.
Monthly Traffic
Bar chart with X-axis labels
Interactive Tooltips
Enable tooltips to show detailed information on hover.
Interactive Chart
Hover over bars to see values
Variants
Choose from four visual styles: card, outline, ghost, or minimal.
Card Variant
Outline Variant
Ghost Variant
Minimal Variant
Multiple Data Series
Display multiple data series in a single chart.
Financial Overview
Quarterly financial performance
Full-Featured Example
All features enabled for a comprehensive visualization.
Comprehensive Analytics
Complete example with all features enabled
API Reference
ChartItem 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 |
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 |
ChartCollection Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ChartItemProps[] | - | 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>;
};
};