Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Line

A multiple line chart for React

A line chart comparing desktop and mobile visitors as two lines.

Framework
UI library

Use it to compare two trends on one scale. Desktop and mobile are two monotone lines sharing the same axes, and the tooltip lists both values for the hovered month.

Preview

Preview width

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

FAQ

How are the two lines drawn?

The chart renders two Line components. Both set type to monotone, dot to false, and strokeWidth to 2. One uses dataKey desktop and stroke var(--color-desktop). The other uses dataKey mobile and stroke var(--color-mobile).

Where do the line colors come from?

config maps desktop to var(--chart-1) and the label Desktop, and mobile to var(--chart-2) and the label Mobile. ChartContainer exposes those as --color-desktop and --color-mobile.

How are the months abbreviated?

XAxis uses dataKey month and tickFormatter set to formatMonth, the first three characters. axisLine and tickLine are false, tickMargin is 8, and the side margins are 12.

Does the tooltip list both series?

Yes. ChartTooltip renders ChartTooltipContent with cursor set to false. The title is the month, and the rows are Desktop and Mobile from config.

What is the grid?

CartesianGrid sets vertical to false. LineChart sets accessibilityLayer, so the points on both lines can be reached from the keyboard.

Which values are on each line?

Desktop is 186, 305, 237, 73, 209, and 214 from January through June. Mobile is 80, 200, 120, 190, 130, and 140. Both lines read that same chartData array.

All 70 chart examples