Question 1

What are the Svelte charts?

Accepted Answer

shadcn/ui's 70 chart examples (area, bar, line, pie, radar and radial, plus nine tooltip variants), rebuilt on TanStack Charts for Svelte. Each chart is a Svelte 5 component with runes: interactive state lives in `$state` and the definition in `$derived`.

Question 2

How do they relate to shadcn/ui's charts?

Accepted Answer

They're shadcn/ui's chart examples, with the same titles, data, config keys and `--chart-1` to `--chart-5` colors. shadcn/ui draws them with Recharts, which is React only. We redrew each one on TanStack Charts so it runs in React, Vue, Svelte and Solid, and kept the Recharts version for React, on our `chart` component.

Question 3

Are the charts free?

Accepted Answer

Yes. Every chart is free to use in personal and commercial projects. Seeing the code and installing it takes a free account, one tap with Google or GitHub. Pro is the site's paid plan for blocks, the Pro collections and the MCP; you don't need it for charts.

Question 4

Are the charts accessible?

Accepted Answer

Each chart is an SVG with `role="img"`, a `chart` role description and an accessible name: the card's title, passed as `ariaLabel`. It takes keyboard focus: Tab into it, the arrow keys move between points, Home and End jump to the ends, Escape closes a pinned tooltip. The tooltip is a polite live region, so a screen reader reads the focused values, and `ariaDescription` adds context beyond the title. Under reduced motion, updates snap into place.

Question 5

Why TanStack Charts?

Accepted Answer

One grammar in four frameworks. A TanStack chart is a `defineChart()` definition: marks, scales and guides as plain data that every adapter renders. So a chart's data, config and definition are the same lines in React, Vue, Svelte and Solid, and only the component around them changes. It draws SVG, follows its container's width, and owns focus, the keyboard and the tooltip.

Question 6

Is it the same chart as the React one?

Accepted Answer

Yes. The data, the config and the `defineChart()` definition are the same lines in every framework, so a chart reads the same in Svelte as in React. Only the component around them changes: Svelte's syntax, our Svelte card and select, and the kit's Svelte `ChartContainer`.

Question 7

How do I install a chart?

Accepted Answer

Signed in, copy the chart's command: `npx shadcn-svelte@latest add` with its URL. It adds the chart to `components/charts`, the `tanstack-chart` kit to your ui folder, and `@tanstack/charts`. Import the chart and render it.

Question 8

What does a chart depend on?

Accepted Answer

`@tanstack/charts` (the scales, the polar marks and the Svelte adapter are its subpaths) and `tanstack-chart`, a small kit with `ChartContainer`, `ChartTooltipContent` and `ChartLegend` that mirrors shadcn/ui's chart parts. The card around each chart is our `card` component; the interactive ones use our `select` or buttons too.

Question 9

Can my AI agent install them?

Accepted Answer

Not the charts themselves: the MCP server installs components, blocks and icons, and it has no chart tools. Copy a chart's command from its page and your agent can run it like any other. With Pro, the MCP installs the cards, selects and dashboard blocks you put the chart in.

Question 10

How do I change a chart's colors?

Accepted Answer

Each chart's `chartConfig` gives every series a `label` and a `color`, `var(--chart-1)` to `var(--chart-5)` by default. `ChartContainer` writes them as `--color-<key>` variables, and the marks paint with `var(--color-desktop)`. Change a config entry to recolor one chart, or the `--chart-N` tokens in your theme to recolor all of them.

Question 11

Do they work in dark mode?

Accepted Answer

Yes. The `--chart-N` tokens have a light and a dark value in your theme, so the series switch with the `.dark` class and nothing in the chart changes. For a color of your own in each mode, give a config entry `theme: { light, dark }` in place of `color`. Tick labels, grid lines and the tooltip use `muted-foreground`, `border` and `background`, set by the container's classes on the SVG.

Charts for Svelte.

Charts are free. Pro builds the rest of the page

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every chart. One file each.