Q: How do I add a legend with icons in Solid?

Put ` ` inside `ChartContainer`, as the Area Chart with Legend does: it lists each series' `label` and color from `chartConfig`. The Area Chart with Icons sets `icon: TrendingDown` and `icon: TrendingUp` from `lucide-solid` on the two entries. An icon is any Solid component, which the kit draws with ` `, and the tooltip shows it too.

Question 1

Should the bands add up to a total or to 100%?

Accepted Answer

To a total, take the Stacked Area Chart: `stackRowsY` piles mobile under desktop, so the top edge is their sum. The Expanded Stacked Area Chart adds `offset: "normalize"` and a third series, `other`, so every month reaches the top and each band reads as a share. Its `tooltip` prop sets `valueKey: "visitors"`, so hovering still shows counts.

Question 2

Which curve suits my data, and where does it come from?

Accepted Answer

`d3Curve(curveNatural)` rounds the Area Chart's trend, the Linear Area Chart leaves `curve` out so every corner is a real value, and the Step Area Chart's `d3Curve(curveStep)` holds each value flat until it changes. In the Solid file the curve comes from `@/registry/charts/kit/solid/tanstack-chart`, which re-exports `curveNatural`, `curveStep` and `curveMonotoneX` from `d3-shape`. Give the `areaY` and the `lineY` along its edge the same one.

Question 3

How does the Interactive Area Chart use signals?

Accepted Answer

`createSignal("90d")` holds the range, and `createMemo(() => chartDefinition(timeRange()))` builds the definition from it. There's no dependency array: the memo tracks the signal it reads. `ChartContainer` gets `definition={definition()}`, so a new range hands it a new definition and the areas tween to their new shape.

Question 4

How is the time range select wired to the signal?

Accepted Answer

It's our Solid `select`, built on Ark UI: `createListCollection({ items: TIME_RANGES })` sits at module scope, and `<For each={collection.items}>` draws a `SelectItem` per range. The value is a one-item array, `value={[timeRange()]}`, and `onValueChange={({ value: [value] }) => value && setTimeRange(value)}` writes the signal. The trigger is `hidden` below `sm`, as in shadcn/ui's original, so drop that class to keep it on phones.

Question 5

How do I pass my own rows in as a prop?

Accepted Answer

The static area charts build `stacked` and `definition` once, at module scope, from the `chartData` constant. For rows that change, turn that code into a function of the rows, as `chartDefinition` is in the interactive chart, and call it in `createMemo(() => chartDefinition(props.rows))`. Read `props.rows` inside the memo instead of destructuring `props`, so Solid tracks it and a new array redraws the chart.

Question 6

How do I add a legend with icons in Solid?

Accepted Answer

Put `` inside `ChartContainer`, as the Area Chart with Legend does: it lists each series' `label` and color from `chartConfig`. The Area Chart with Icons sets `icon: TrendingDown` and `icon: TrendingUp` from `lucide-solid` on the two entries. An icon is any Solid component, which the kit draws with ``, and the tooltip shows it too.

Question 7

Can a Solid area chart show values on the side?

Accepted Answer

The Area Chart with Axes does: its y scale prints 0, 300 and 600 with `values: [0, 300, 600]` and `size: 0` on its ticks and `line: false` on its axis, and the margin's `left: 40` leaves room for them. The other nine keep `axis: false` on y and let the grid lines and the tooltip carry the numbers.

Question 8

How do I install a chart?

Accepted Answer

Signed in, copy the chart's command: `npx shadcn@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

Area charts for SolidJS.

Area charts

More Solid charts

Area charts in other frameworks

Charts are free. Pro builds the rest of the page

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Should the bands add up to a total or to 100%?

Which curve suits my data, and where does it come from?

How does the Interactive Area Chart use signals?

How is the time range select wired to the signal?

How do I pass my own rows in as a prop?

How do I add a legend with icons in Solid?

Can a Solid area chart show values on the side?

How do I install a chart?

Are the charts free?

Fill the card. Pro fills the page.