Q: Which rune holds the Interactive Bar Chart's active series?

`let activeChart = $state ("desktop")` holds the series, and `const definition = $derived(chartDefinition(activeChart))` rebuilds the bars in that series' `var(--color- )`. The header is an `{#each series as key (key)}` block of plain ` ` elements with `onclick={() => (activeChart = key)}` and `aria-pressed`, each showing `total[key].toLocaleString()`. A third series needs one more field in the rows and one more key in `total`, `chartConfig` and `series`.

Question 1

Grouped, stacked or horizontal: which Svelte bar chart fits?

Accepted Answer

Grouped, as in the Multiple Bar Chart, when people compare desktop with mobile month by month: `layout: group()` on `barY` sets the folded series side by side. Stacked, as in the Stacked Bar Chart with Legend, when the total matters too: `layout: stack({ order: ["desktop", "mobile"] })` piles them up. Horizontal, as in the Horizontal and Mixed Bar Charts, for long names or a ranking: `barX` takes the value on `x` and the category on `y`.

Question 2

Can the bars go below zero?

Accepted Answer

Yes: put negative numbers in the rows, and `chartLinearScale` takes zero and the lowest value into its domain. The Bar Chart with Negative Values colors each bar with a `signColor` function, `var(--chart-1)` above zero and `var(--chart-2)` below, and reuses it for the month label, which a `dy` of -8 or 12 sets past the bar's end.

Question 3

How do I print the values on the bars?

Accepted Answer

Add a `text` mark over the same rows and wrap it in `decorative()`, so the pointer and the tooltip still read only the bars. The Bar Chart with Labels writes each value above its bar with `dy: -15` and leaves room with a top `margin` of 20. The Bar Chart with Custom Labels writes the month inside each horizontal bar in `var(--color-label)`, a config entry set to the background color, and the value after it.

Question 4

Where do the bar colors come from in the Svelte files?

Accepted Answer

Each `chartConfig` entry's `color`, like `var(--chart-1)`, becomes a `--color-` variable in the style `ChartContainer` writes on its `

`, and the bars paint with `var(--color-desktop)`. The Mixed Bar Chart gives every browser row its own `fill`, such as `var(--color-chrome)`, and paints with `fill: (datum) => datum.fill`. An entry with `theme: { light, dark }` in place of `color` gets a `

Question 5

Can one bar stand out from the rest?

Accepted Answer

The Bar Chart with Active Bar does it with accessors: its `fill`, `stroke` and `strokeDasharray` compare each row's `index` with `ACTIVE_INDEX`, which is 2, so Firefox gets a dashed outline and its fill at 80% opacity. To move the highlight on click, turn `ACTIVE_INDEX` into `$state`, derive the definition from it, and set it from the point `ChartContainer`'s `onSelect` callback receives.

Question 6

Which rune holds the Interactive Bar Chart's active series?

Accepted Answer

`let activeChart = $state("desktop")` holds the series, and `const definition = $derived(chartDefinition(activeChart))` rebuilds the bars in that series' `var(--color-)`. The header is an `{#each series as key (key)}` block of plain `

Question 7

How do I pass rows to a bar chart as a prop?

Accepted Answer

Replace the `chartData` constant with `let { data } = $props()` and move the `defineChart(...)` call into `$derived`, so the bars redraw when the parent passes new rows. In the grouped and stacked charts the `fold(...)` that makes one row per series already sits inside the definition, so it moves with it. Then render the file from a SvelteKit route as `<BarChart data={monthlyVisits} />`, under whatever name you import it.

Question 8

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 9

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.

Explore UI

Popular

Frameworks

Built On

Explore Blocks

Marketing

Application

Explore Charts

Popular

Frameworks

Explore Examples

More Galleries

Explore Icons

More Libraries

Browse

Explore Templates

Categories

Community

Explore Design Systems

Categories

More

Explore Tools

Categories

Explore MCP

Set Up In

Help

Explore Pro

Resources

Legal

Grouped, stacked or sideways, in Svelte.

Bar charts

More Svelte charts

Bar charts in other frameworks

Charts are free. Pro builds the rest of the page

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Grouped, stacked or horizontal: which Svelte bar chart fits?

Can the bars go below zero?

How do I print the values on the bars?

Where do the bar colors come from in the Svelte files?

Can one bar stand out from the rest?

Which rune holds the Interactive Bar Chart's active series?

How do I pass rows to a bar chart as a prop?

How do I install a chart?

Are the charts free?

Raise the bars in Svelte.