Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Line

A linear line chart for React

A line chart joining its monthly values with straight segments.

Framework
UI library

Use straight segments when the line should go exactly through each value without smoothing. type="linear" joins the six months point to point, so every change of direction shows as a corner.

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 segments straight?

Line sets type to linear, so each desktop value connects to the next with a straight stroke. dot is false, stroke is var(--color-desktop), and strokeWidth is 2.

Where does the line color come from?

config sets desktop to the label Desktop and color var(--chart-1). ChartContainer writes --color-desktop for the stroke.

How are the month ticks shortened?

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

What are the side margins for?

LineChart sets margin to 12 on the left and right. CartesianGrid sets vertical to false, and LineChart sets accessibilityLayer.

What does the tooltip show?

ChartTooltipContent sets hideLabel, and cursor is false. The row is the Desktop value from config for the hovered month.

Which points does the line join?

January 186, February 305, March 237, April 73, May 209, and June 214, on dataKey desktop. type linear draws one straight segment between each pair.

All 70 chart examples