Charts
A chart component system built on Recharts for creating responsive, accessible data visualizations. Supports line charts, bar charts, area charts, pie charts, and more with customizable theming and styling.
Installation
Import
Usage
The Chart component system is built on Recharts and provides a flexible way to create data visualizations. Use ChartContainer to wrap any Recharts chart component and provide configuration for theming. The component automatically handles responsive sizing and applies theme-aware styling. Use ChartTooltip and ChartTooltipContent for consistent tooltip styling across all charts. Charts are ideal for dashboards, analytics pages, reports, and any interface requiring data visualization.
Design Guidelines
Charts should be clear and easy to read with appropriate color contrast. Use the chart config to define semantic colors that match your design system. Ensure charts are responsive and work well on different screen sizes. Use tooltips to provide additional context for data points. Consider accessibility by providing alternative text descriptions for screen readers. Group related charts together and use consistent styling across all visualizations.
Basic Usage
Simple bar chart with basic configuration
Line Chart - Website Traffic
Monthly website visitors over time
Bar Chart - Sales Performance
Sales vs target by product category
Stacked Bar Chart - Device Usage
Stacked bar chart showing device distribution
Area Chart - User Growth
Stacked area chart showing desktop and mobile users
Multiple Series - Revenue & Expenses
Line chart comparing revenue and expenses over time
Composed Chart - Financial Overview
Combined bar and line chart showing revenue, expenses, and profit
Pie Chart - Browser Usage
Donut chart showing browser distribution with interactive legend
Scatter Chart - User Engagement
Scatter plot showing correlation between page views and time on site
Radar Chart - Performance Metrics
Radar chart displaying website performance scores across multiple dimensions
Radial Bar Chart - Progress Indicator
Circular progress indicator showing completion percentage
ChartContainer
Main container component that wraps Recharts components and applies theming This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
config | ChartConfig | - | Configuration object for chart styling |
id | string | undefined | Unique identifier for the chart |
className | string | — | Additional CSS classes to apply to the component |
ChartTooltip
Wrapper for Recharts Tooltip component This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
ChartTooltipContent
Custom tooltip content component with formatted data display This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
indicator | "dot" | "line" | "dashed" | "dot" | Type of indicator to display in tooltip |
hideLabel | boolean | false | Whether to hide the tooltip label |
hideIndicator | boolean | false | Whether to hide the indicator |
className | string | — | Additional CSS classes to apply to the component |
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
config | ChartConfig | - | Configuration object defining colors and labels for chart elements |
id | string | undefined | Optional unique identifier for the chart. If not provided, a unique ID is generated |
children | React.ReactNode | - | Recharts chart components (LineChart, BarChart, AreaChart, PieChart, etc.) |
className | string | — | Additional CSS classes to apply to the component |