Shadcn Chart Examples: Recharts Powered Graphs for React Dashboards
The shadcn chart component wraps Recharts with a theming layer that connects series colors, tooltips, and legends to your Tailwind CSS design tokens. Instead of hand-styling every axis and cursor, you describe a ChartConfig object and the container exposes CSS variables that keep every react chart consistent with your palette in light and dark mode.
This page hosts copy-paste chart examples starting from a basic bar chart, ready to extend into area, line, pie, and radial variants. Each snippet is TypeScript, works in Next.js client components, and follows the same ChartContainer plus ChartTooltip anatomy so swapping chart types is mostly a matter of changing the Recharts elements inside.
Key features
- Config driven theming: ChartConfig maps each data series to a label and color, generating CSS variables the chart consumes.
- Styled tooltip and legend: ChartTooltipContent and ChartLegendContent replace the default Recharts UI with shadcn styled equivalents.
- Dark mode ready: Colors defined as CSS variables flip automatically when the theme changes, with per-theme overrides supported.
- Composable Recharts core: Any Recharts element such as Bar, Area, Line, or Pie works inside the container without wrapper lock-in.
- Responsive container: Charts resize with their parent, which keeps dashboard grids fluid across breakpoints.
Best practices
- Choose the right mark: Bars compare categories, lines show trends over time, and areas emphasize cumulative volume. Match the mark to the question.
- Limit series count: More than four or five series turns a legend into a puzzle, so split dense data into multiple charts.
- Start bar axes at zero: Truncated bar axes exaggerate differences and mislead readers.
- Label with the config: Keep human readable labels in ChartConfig so tooltips and legends stay in sync with one source of truth.
- Show loading placeholders: Render a skeleton in the chart footprint while data loads to avoid layout shift.
Common use cases
Analytics dashboards are the obvious destination: revenue over time as an area chart, signups by channel as a bar chart, and plan distribution as a donut. A chart typically lives inside a card with a title, description, and a trend footer, and a skeleton placeholder keeps the layout stable while the query runs.
Beyond dashboards, small sparkline-style charts embed in a data table row to show per-item trends, and KPI tiles combine a large number with a compact chart underneath. Complete wired examples of these patterns are available in our React dashboard templates.
Working with the rest of your UI
Range switching pairs naturally with tabs or a select for choosing 7, 30, or 90 day windows, while a date picker covers custom ranges. Because the chart is just a React component, the state driving it can live in a Zustand store shared with filters elsewhere on the page.
Under the hood
Rendering is handled entirely by Recharts, a declarative SVG charting library for React, while shadcn/ui contributes the container, tooltip, and legend layers described in the official chart docs. Nothing here depends on Radix UI or Base UI primitives, so the chart drops into either ecosystem. Since Recharts touches the DOM, chart components must be client components in Next.js, marked with the use client directive.