Q: How do I plot several series on one line chart?

One ` ` per field, each with its `dataKey` and `stroke="var(--color- )"`, as the Multiple Line Chart draws `desktop` and `mobile` with `dot={false}` and `strokeWidth={2}`. JSX order is paint order, so the last ` ` sits on top where they cross, and the tooltip lists them in the same order. A third series needs its field in every row, a `chartConfig` entry and a third ` `.

Q: How do I write values or names above the points?

Put ` ` inside ` `, with `className="fill-foreground"` and `fontSize={12}`, and give ` ` a top margin of 20 so the highest label fits. The Line Chart with Custom Labels sets `dataKey="browser"` on it and a `formatter` that returns `chartConfig[value]?.label`, so `chrome` prints as Chrome. It drops ` `, since the labels already name the points.

Question 1

Which `type` should a Recharts `<Line>` get?

Accepted Answer

`natural`, as most of these use, rounds every turn but can swing past a point. The Multiple and Interactive line charts use `monotone`, which never bends past a point, so two close lines don't seem to cross; the Linear Line Chart's `linear` draws straight segments, and the Step Line Chart's `step` holds each value until it changes. `stepAfter` and `stepBefore` move the jump to one end.

Question 2

How do I plot several series on one line chart?

Accepted Answer

One `` per field, each with its `dataKey` and `stroke="var(--color-)"`, as the Multiple Line Chart draws `desktop` and `mobile` with `dot={false}` and `strokeWidth={2}`. JSX order is paint order, so the last `` sits on top where they cross, and the tooltip lists them in the same order. A third series needs its field in every row, a `chartConfig` entry and a third ``.

Question 3

What does a Recharts line do with a missing value?

Accepted Answer

A `null` breaks the line in two by default. Set `connectNulls` on `<Line>` to draw straight across the gap. A custom `dot` function should return `null` when `cx` or `cy` is missing, as the Line Chart with Custom Dots does, so the gap gets no stray marker.

Question 4

How do I change the dots on a Recharts line?

Accepted Answer

Most of these set `dot={false}`. The Line Chart with Dots passes `dot={{ fill: "var(--color-desktop)" }}` and grows the hovered point with `activeDot={{ r: 6 }}`. Pass `dot` a function for anything else: the Colored Dots chart returns a `<Dot>` filled from each row's `fill`, and the Custom Dots chart returns lucide's `GitCommitVertical` icon, offset by half its 24px size to center it.

Question 5

How do I write values or names above the points?

Accepted Answer

Put `` inside ``, with `className="fill-foreground"` and `fontSize={12}`, and give `` a top margin of 20 so the highest label fits. The Line Chart with Custom Labels sets `dataKey="browser"` on it and a `formatter` that returns `chartConfig[value]?.label`, so `chrome` prints as Chrome. It drops ``, since the labels already name the points.

Question 6

Recharts or TanStack Charts for a React line chart?

Accepted Answer

Recharts, when your app already uses it or shadcn/ui's `chart` component: these are the same `<LineChart>` files, and each change is a prop on a component you can see. TanStack Charts, when the chart has to run in Vue, Svelte or Solid too, since Recharts is React only. Both draw the same 10 line charts with the same data and `chartConfig`.

Question 7

How does the Interactive Line Chart stay readable over three months?

Accepted Answer

It draws one series at a time: the header buttons set `activeChart`, and `` strokes it with the matching `var(--color-)`. `type="monotone"` and `dot={false}` keep the daily points calm, and `minTickGap={32}` on `` drops dates that would collide. The tooltip's `labelFormatter` adds the year, and `nameKey="views"` names the value Page Views.

Question 8

Can a keyboard user follow the line?

Accepted Answer

Yes. Every `<LineChart>` here sets `accessibilityLayer`: Tab into it and the arrow keys move the active point and its tooltip from month to month, and Recharts draws the active dot where you are. The tooltip isn't a live region, so a screen reader doesn't announce each value; keep the card's title and description, which say what the line measures.

Question 9

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`, our `chart` and `card` components to your ui folder, and `recharts`.

Question 10

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

Line charts you compose in Recharts.

Line charts

More Recharts charts

Line charts in other frameworks

Charts are free. Pro builds the rest of the page

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Which `type` should a Recharts `<Line>` get?

How do I plot several series on one line chart?

What does a Recharts line do with a missing value?

How do I change the dots on a Recharts line?

How do I write values or names above the points?

Recharts or TanStack Charts for a React line chart?

How does the Interactive Line Chart stay readable over three months?

Can a keyboard user follow the line?

How do I install a chart?

Are the charts free?

Start from a line that already works.