Chart
Visualize data using customizable charts powered by Recharts.
Line Chart
Stacked Area Chart
Installation
1
npm install rechartsProps
| Component | Props | Description |
|---|---|---|
| ChartContainer | id?, className?, config, children, ...divProps | Chart wrapper that provides theming and context for tooltips and legends. Accepts a config object for colors and labels. |
| ChartTooltipContent | active, payload, hideLabel?, hideIndicator?, indicator?, label?, labelFormatter?, formatter?, labelClassName?, color?, nameKey?, labelKey? | Custom tooltip content with theme-aware indicators, label formatting, and full config integration. |
| ChartLegendContent | className?, payload, verticalAlign?, hideIcon?, nameKey? | Custom legend with icon rendering, label overrides, and vertical positioning support. |
| ChartStyle | id, config | Injects scoped CSS variables for dynamic chart theming using light/dark palettes. |
| ChartTooltip | *Inherits Recharts.Tooltip | Unstyled Recharts tooltip, used optionally outside the styled content variant. |
| ChartLegend | *Inherits Recharts.Legend | Unstyled Recharts legend, used optionally outside the styled content variant. |
| LineChart / AreaChart | width, height, data | Container for drawing chart lines or stacked areas. |
| Line / Area | dataKey, stroke, fill, stackId | Defines each data element's shape and style. |
| XAxis / YAxis | dataKey, domain | Chart axes configuration. |
| Tooltip | formatter, labelFormatter | Custom tooltip for chart data. |