Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Multiple Line Chart

Desktop and mobile visitors as two lines on shared axes, for spotting where the series cross, lead or drift apart, in React with Recharts.

Framework
Charting library

Preview

Preview width

About

Use it to compare how two series move over the same months: where they cross, which one leads, whether they rise together. Lines can overlap without hiding each other, unlike stacked areas, so the gap between them reads directly. Past four lines the colors blur; the interactive version shows one at a time instead.

Two monotone curves share one set of months and one value scale, each in its own color, without dots until you hover: then both lines get a dot at that month. The tooltip shows the month and then one row per series, each with a dot in that series' color.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { ChartLineMultiple } from "@/components/charts/chart-line-multiple";
<ChartLineMultiple />

Customize

  • Two <Line> elements share <LineChart data={chartData}>: dataKey="desktop" and dataKey="mobile", each stroked with its own var(--color-<key>).
  • type="monotone" keeps each curve from overshooting its points, and dot={false} leaves clean strokes.
  • JSX order is paint order: the second <Line> draws over the first where they cross.
  • <ChartTooltipContent /> with no props shows the month and one row per line, in the order the lines are declared.

FAQ

How do I add a third line?

Add the field to every row, a tablet entry in chartConfig with var(--chart-3), and a third <Line dataKey="tablet" stroke="var(--color-tablet)" />.

Why are the curves monotone here?

type="monotone" never bends past a point, so neither line suggests a peak or a dip that isn't in the data. With two lines close together, natural can overshoot and make them seem to cross when they don't. Change type on each <Line> to try another shape.

How do I show which line is which?

Add <ChartLegend content={<ChartLegendContent />} /> inside <LineChart>. It reads the labels and colors from chartConfig; verticalAlign="top" moves it above the plot.

What if the two series use different units?

Add a second <YAxis yAxisId="right" orientation="right" /> and set yAxisId on each <Line> to its axis. Label both, since two axes make it easy to compare things that aren't comparable. Two small charts are often clearer.

How do I make one line stand out?

Fade the other <Line> with strokeOpacity={0.4} or dash it with strokeDasharray="4 4". JSX order also matters: the last <Line> paints on top where they cross.

How does keyboard focus work with two lines?

By month. With accessibilityLayer, the arrow keys move the tooltip from one month to the next, and it lists both <Line> series in the order you declared them.

API Reference

ChartContainer

PropType
configChartConfig

Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.

initialDimension?{ height: number; width: number; }

The size it renders at before it's measured, so the first paint isn't * empty.

Type
{ height: number; width: number; }
Default
INITIAL_DIMENSION
className?string

Merged with the part's classes.

ChartLegend

ChartLegendContent

<div>

PropType
hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default
false
nameKey?string

The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.

className?string

Merged with the part's classes.

ChartStyle

<style>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
hideIndicator?boolean

Hides each item's color indicator.

Default
false
hideLabel?boolean

Hides the tooltip's label, the hovered point's.

Default
false
indicator?"dashed" | "dot" | "line"

The color indicator's shape: a dot, a line or dashed.

Type
"dashed" | "dot" | "line"
Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode

Formats the tooltip's label; its value is untyped, as in recharts 3.8.

Type
(label: any, payload: TooltipPayload) → React.ReactNode
Parameters

label – any

payload – TooltipPayload

Returns
React.ReactNode
labelKey?string

The key in the data to read the label from, looked up in config.

nameKey?string

The key in each item's data to look its name up by in config.

className?string

Merged with the part's classes.

All 70 charts