What it does
Wraps Recharts Cartesian and scatter primitives with shared margins, axes, grid, tooltip, and legend wiring.
Swap appearance tokens instead of hand-tuning SVG colors for every screen.
Chart types
- Trend lines and stacked areas on analytics dashboards.
- Category bars for funnel or cohort summaries.
- Radar, scatter, and bubble plots for multi-axis or correlation analysis.
- Funnel charts for product and sales conversion steps.
- Pie and donut charts for part-to-whole summaries.
- Consistent tooltips, axes, and density across screens.
Composition and API
Pass `data`, `xKey`, and `series` for cartesian, radar, scatter, and bubble charts. Area and bar support `stacked`; StackedBarChart applies it by default.
Bubble charts use optional `zKey` on each series for bubble size. Pie and funnel charts use `dataKey` and `nameKey` for values and labels.
Next.js integration notes
Mark preview routes or parents as client components when embedding interactive charts.
Set NEXT_PUBLIC_SITE_URL so canonical metadata resolves on deploy.
FAQ
Do I need to install Recharts?
Yes. Add `recharts` to your app so the peer dependency resolves; align the major version with what Zentauri UI tests against.
Do charts work in the Next.js App Router?
Use them in client components or import from client boundaries—Recharts relies on browser APIs and React state for interaction.
Can I restyle charts with Tailwind?
Use the `appearance` and `density` variants on the frame plus `className` for layout; inner Recharts elements pick up token-friendly defaults from the wrapper.