Chart Component
Basic chart types with recharts integration and orbit-capsule styling.
Line Chart
Simple trend visualization.
Bar Chart
Categorical data comparison.
Area Chart
Stacked area with gradients.
Pie Chart
Proportional data distribution.
Desktop58%
Mobile32%
Tablet10%
API Reference
ChartContainer Props
Wrapper component for recharts charts. Provides configuration context and styling.
| Prop | Type | Default | Description |
|---|---|---|---|
| config | ChartConfig | — | Color and label configuration for chart data keys |
| className | string | — | Additional CSS classes for styling |
ChartTooltip Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | React.ReactNode | — | Custom content component (typically ChartTooltipContent) |
ChartTooltipContent Props
Renders formatted tooltip content with color indicators and values.
| Prop | Type | Default | Description |
|---|---|---|---|
| hideLabel | boolean | false | Hide the data key label |
| hideIndicator | boolean | false | Hide the color indicator dot |
ChartLegend Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | React.ReactNode | — | Custom content component (typically ChartLegendContent) |
ChartLegendContent Props
Renders formatted legend with color indicators and labels.
| Prop | Type | Default | Description |
|---|---|---|---|
| hideIcon | boolean | false | Hide the color indicator icon |
ChartConfig Type
Object mapping data keys to chart configuration. Each key contains a label and color (CSS variable or hex value).
type ChartConfig = Record<string, { label: string; color: string }>Notes
- These components are wrappers around
rechartscomponents - Use CSS variables like
var(--accent)for theme-aware colors - All chart components support standard recharts props