Question 1

What is a shadcn chart?

Accepted Answer

A Recharts chart wrapped in shadcn.io's Chart component. `ChartContainer` takes a `config` that names and colors each series, sizes the chart and writes the colors as CSS variables; `ChartTooltipContent` and `ChartLegendContent` render the tooltip and the legend from that config, so every chart matches your theme in light and dark. Each example is one small file, on React with Base UI, React Aria, Ark UI or Radix UI.

Question 2

Are these chart examples free?

Accepted Answer

Yes. Every chart example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

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

Accepted Answer

Recharts is declarative React: a chart is a tree of components such as `XAxis`, `Bar` and `Tooltip`, which fits the way the rest of your UI is written, and it renders SVG you can style with classes. Chart.js draws on a canvas, which is harder to style with CSS. Visx is lower level and suits custom visualizations more than standard bars and lines. The examples are React only for that reason: Recharts is a React library.

Question 4

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

Accepted Answer

Area for a trend where the volume matters too, such as traffic or revenue over time, and stacked areas for the parts of a total. Line for comparing trends without the weight of a fill. Bar for comparing categories. Pie or donut for parts of a whole with a handful of categories; past five or six, use a sorted horizontal bar chart. Radar for comparing several measures at once, and radial for a single value or a few as progress.

Question 5

How do I theme the chart series colors?

Accepted Answer

Give each series an entry in the `config` passed to `ChartContainer`, with a `label` and a `color`, for example `revenue: { label: "Revenue", color: "var(--chart-1)" }`. The container writes it as `--color-revenue`, which the series reads with `fill="var(--color-revenue)"`. `--chart-1` through `--chart-5` come with the theme and change in dark mode; for a custom light and dark pair, set `theme` instead of `color`.

Question 6

How do I add a tooltip with custom formatting?

Accepted Answer

Render `ChartTooltip` inside the chart with `ChartTooltipContent` as its content. `indicator` is `dot`, `line` or `dashed`; `hideLabel` and `hideIndicator` remove the title and the color marks; `labelFormatter` formats the title, such as a full date; `formatter` replaces each row, for units or a total. The Tooltip examples show each of these.

Question 7

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

Accepted Answer

A radial chart suits a single value shown as progress, or two or three values, with room in the center for the number. A pie suits a few categories whose shares matter. Past five or six slices, the small ones can't be compared; switch to a horizontal bar chart sorted by value.

Question 8

How do I make charts responsive?

Accepted Answer

`ChartContainer` fills its parent's width and defaults to a 16:9 box. For another shape, pass a class: `aspect-square` with a `max-h-*` for pies and radars, or `aspect-auto` with a fixed height such as `h-[250px]` for wide time series. The chart needs a parent with a real width; a flex child without one collapses it.

Question 9

How do I install a chart example?

Accepted Answer

Sign in with a free account, then copy the code or run the install command on the example's page. It adds the example, the Chart component and `recharts` to your project if you don't have them yet. Then replace the sample data with your own.

Question 10

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

Accepted Answer

Fetch the data the way you already do, on the server or with a client data library, and pass the array to the chart's `data` prop. Keep the keys the same as in `config`, or update both. The chart redraws when the array changes; for live data, batch updates rather than redrawing many times a second.

Question 11

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

Accepted Answer

Recharts has a `Brush` component: add it inside a time-series chart with the `dataKey` of the dates, and dragging its handles shows only that range. None of these examples uses it. On touch screens its handles are small, so a date range picker is often easier.

Question 12

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

Accepted Answer

The chart is an SVG, so you can serialize the `svg` element inside the container to a string and download it. For a PNG, draw that SVG onto a canvas and call `toDataURL`, or use a library that does it for you. The colors are CSS variables, so resolve them first or the file will lose them.

Question 13

Which libraries do chart examples depend on?

Accepted Answer

The Chart component, `recharts` and Tailwind CSS, plus Lucide icons in the examples that show icons in a legend, a tooltip or as dots. Nothing else: the data is static sample data in each file.

Question 14

Are chart examples accessible for screen reader users?

Accepted Answer

The examples set `accessibilityLayer` on the chart, so the points can be reached and moved through from the keyboard, and the tooltip names each series with its `label` from `config`, so color isn't the only cue. The SVG itself says little to a screen reader: put a short summary of what the chart shows in text next to it.

Question 15

Can I use these chart examples with React Server Components?

Accepted Answer

The Chart component and the examples are client components, since Recharts measures the DOM. Fetch the data in a Server Component and pass it to the chart as a prop; the page itself doesn't need to be a client component.

Question 16

Do these examples work with Tailwind CSS v3 and v4?

Accepted Answer

They're written for Tailwind CSS v4. Classes such as `fill-(--color-desktop)` and `bg-(--color-bg)` use v4's syntax for CSS variables, and the chart tokens are defined in your global CSS. On v3, upgrade first or rewrite those classes.

Chart Examples

A linear area chart

A simple area chart

A stacked area chart

A stacked area chart with expand stacking

A step area chart

An area chart with a legend

An area chart with axes

An area chart with gradient fill

An area chart with icons

An interactive area chart

A bar chart

A bar chart with a custom label

More component examples

Data Table

Item

Kbd

Table

Avatar

Badge

Carousel

Checkbox

Chart examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every chart example. One prompt away.