Q: How do I add a tooltip with custom formatting?

Use ` } />` for the default styled tooltip. Customize the `formatter` prop on ChartTooltipContent (or via Recharts' Tooltip props) to control how values render — currency, percentage, dates. The `indicator` prop accepts `"dot"`, `"line"`, or `"dashed"`. For multi-series tooltips, ensure each series has a meaningful `dataKey` and `name` in the ChartConfig so the tooltip labels read clearly.

Question 1

What is a shadcn chart?

Accepted Answer

A shadcn chart is a styled, theme-aware data visualization built on Recharts (the React-friendly D3 wrapper) with the shadcn/ui ChartContainer / ChartTooltip / ChartLegend primitives. The primitives wire up CSS-variable-driven colors (`var(--chart-1)` through `var(--chart-5)`), consistent tooltip + legend styling, and ARIA-friendly accessibility — so charts adapt to your theme automatically and feel native to the rest of your shadcn/ui app. Each example in this gallery is a single self-contained TSX file.

Question 2

Are these chart examples free?

Accepted Answer

Yes. Every chart example on shadcn.io is free to copy and use in personal or commercial projects. There's no gated source, no attribution requirement, and no runtime dependency on shadcn.io. Browse any example, view the code, run the installer, and move on.

Question 3

Why Recharts and not Chart.js, Visx, or Nivo?

Accepted Answer

Recharts is React-first (declarative components, not imperative canvas APIs), composable (each chart type is a tree of ``, ``, ``, etc.), tree-shakeable, and TypeScript-friendly. Chart.js is canvas-based and harder to style with CSS. Visx is lower-level (you build your own chart from D3 primitives) — great for custom viz, overkill for standard bar/line/pie. Nivo is similar to Recharts but heavier. shadcn/ui chose Recharts for its composition model.

Question 4

When should I use an area chart versus a line, bar, or pie chart?

Accepted Answer

Area for cumulative or stacked time-series where the volume matters as much as the trend (revenue over time, user growth, system load). Line for pure trend comparison without volume emphasis. Bar for categorical comparison (sales per region, errors per endpoint). Pie / Donut for parts-of-a-whole when there are 5 or fewer categories (otherwise switch to a horizontal bar chart). Radar for multi-axis comparison. Radial for single-value gauges or progress indicators.

Question 5

How do I theme the chart series colors?

Accepted Answer

Use `var(--chart-1)` through `var(--chart-5)` (declared in your global.css under `:root` and `.dark`). Set them via the ChartConfig object: `{ revenue: { label: "Revenue", color: "var(--chart-1)" } }`. The shadcn ChartContainer scopes them to `--color-revenue` so any Recharts component inside can reference `fill="var(--color-revenue)"`. Both light and dark modes work without additional code.

Question 6

How do I add a tooltip with custom formatting?

Accepted Answer

Use `} />` for the default styled tooltip. Customize the `formatter` prop on ChartTooltipContent (or via Recharts' Tooltip props) to control how values render — currency, percentage, dates. The `indicator` prop accepts `"dot"`, `"line"`, or `"dashed"`. For multi-series tooltips, ensure each series has a meaningful `dataKey` and `name` in the ChartConfig so the tooltip labels read clearly.

Question 7

When should I use a radial chart versus a regular pie?

Accepted Answer

Radial for single-value progress indicators ("73% goal completion") or 1–3 segment summaries — the open center invites a number/label inside. Pie for proportional breakdowns of 4–6 categories where each segment matters. Avoid pies for >6 segments; users can't perceive small slices. For 7+ categories, switch to a horizontal bar chart sorted by value — much easier to scan.

Question 8

How do I make charts responsive?

Accepted Answer

Wrap each chart in `<ChartContainer config={…} className="h-[300px] w-full">` (or whatever fixed height + width 100%). The container gives Recharts the dimensions it needs (ResponsiveContainer is wired internally). For variable-height layouts, use `aspect-[16/9]` or `aspect-square` instead of fixed height. Mobile-first: pick a smaller height for narrow viewports (`h-[200px] md:h-[400px]`).

Question 9

How do I install a chart example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading on any example's detail page. The shadcn CLI copies the example's TSX source into your project at `components/examples/chart/…`, plus the shadcn/ui Chart primitive (ChartContainer, ChartTooltip, ChartLegend) and Recharts if you don't already have them. Replace the sample data array with your real data.

Question 10

How do I connect charts to a real backend / API?

Accepted Answer

Fetch the data via your usual data layer (React Server Component, useSWR, useQuery, server actions) and pass the resulting array as the `data` prop on the chart. The chart re-renders when the data changes. For real-time updates (live latency, websocket streams), throttle updates to no more than once per second — Recharts re-renders the entire chart each time, which is wasteful at higher frequencies.

Question 11

How do I add a brush / range selector below a time-series chart?

Accepted Answer

Recharts ships a `<Brush>` component — drop it inside the chart with `dataKey="date"` and `height={30}`. Users drag the brush handles to zoom into a sub-range. The chart re-renders showing only the brushed range. For mobile, brush UX is awkward (small drag handles); pair with explicit Date Range Picker controls on touch devices.

Question 12

How do I export the chart as an image (SVG, PNG)?

Accepted Answer

Recharts renders to SVG, so you can grab the `<svg>` element via ref and serialize it to a string for a download. For PNG, render the SVG into a canvas (via `Image` + `drawImage`) then call `canvas.toDataURL("image/png")`. Libraries like `dom-to-image` or `html-to-image` wrap this complexity. For dashboard exports (multiple charts in one PDF), use a server-side rendering approach (Puppeteer + your existing chart route) for higher fidelity.

Question 13

Which libraries do chart examples depend on?

Accepted Answer

Recharts (the React chart primitive — handles axes, scales, tooltips, animations), shadcn/ui Chart (ChartContainer, ChartTooltip, ChartLegend — wires the theme tokens and ARIA), Tailwind CSS (styling around the chart), and Lucide React (icons in chart legends or tooltips). TypeScript is assumed. React 19 is the baseline. The chart palette tokens are declared in your global.css as part of the shadcn theme.

Question 14

Are chart examples accessible for screen reader users?

Accepted Answer

Recharts renders SVG with role attributes and supports `` / `<desc>` elements for chart-level descriptions. The shadcn ChartContainer adds keyboard navigation between data points (arrow keys cycle through series). For full accessibility, also include a hidden text summary above the chart ("Revenue grew 23% from January to June, peaking at $48k in May") — visual chart users skip it; SR users get a meaningful narrative without parsing axes.

Question 15

Can I use these chart examples with React Server Components?

Accepted Answer

Recharts is a client-only library (uses ResizeObserver and DOM APIs internally). The chart itself needs `"use client"`, but data fetching can stay on the server: the parent Server Component fetches the array and passes it down via props. For static dashboards (data doesn't change between requests), pre-render the chart on the server with `next/dynamic({ ssr: false })` to keep the initial bundle small.

Question 16

Do these examples work with Tailwind CSS v3 and v4?

Accepted Answer

Both. shadcn.io is authored on Tailwind v4, so the examples use the v4 class names and the chart palette tokens (`--chart-1`–`--chart-5`). If you're on Tailwind v3, the classes still apply — Tailwind v4 introduced opt-in features but kept the utility naming compatible. The chart tokens are declared identically across versions, just in different CSS file locations (globals.css works for both).

React Chart Examples for shadcn/ui

Browse every chart example

Every chart example. One prompt away.

Grab your MCP URL

Paste into your editor

Prompt as usual

Frequently Asked Questions

Stop piecing primitives together. Ship full sections.

Pick any block

Own the code

Ship today

Data Table

Table

Progress

Skeleton

Card

Badge

Tooltip

Separator