Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Linear Line Chart

A line drawn as straight segments from month to month, so it never hints at values between two readings. For React, drawn with Recharts.

Framework
Charting library

Preview

Preview width

About

Pick it over the smooth line when the readings are all you know: monthly snapshots, prices, counts. Straight segments promise nothing between two months, while a curve can bulge above the highest reading. The corners also make each month easy to find without dots.

Six monthly values joined by straight strokes, over horizontal grid lines, with three-letter months below. The tooltip shows the value without the month.

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 { ChartLineLinear } from "@/components/charts/chart-line-linear";
<ChartLineLinear />

Customize

  • type="linear" on <Line> joins the points with straight segments; that prop is the whole difference from the Line Chart.
  • dot={false} hides the markers. Set dot to an object such as { fill: "var(--color-desktop)" } to show them.
  • stroke="var(--color-desktop)" reads the variable ChartContainer writes from chartConfig, at strokeWidth={2}.
  • <ChartTooltipContent hideLabel /> shows the value alone, and cursor={false} drops the hover cursor.

FAQ

When should I use straight segments instead of a curve?

When the points are measurements and nothing is known between them: prices, inventory, survey results. A natural curve rounds every turn and can bulge past a point, which reads as a value that never happened. Curves suit overviews where the general shape matters more than each reading.

How do I get sharp corners?

Recharts draws the path with SVG's default miter joins, so the corners are already sharp. Pass strokeLinejoin="round" to <Line> to soften them.

How do I mark each reading?

Replace dot={false} with an object, dot={{ fill: "var(--color-desktop)", r: 4 }}, and add activeDot={{ r: 6 }} to grow the hovered one, as the Line Chart with Dots does.

What happens with a missing month?

A null value breaks the line by default. Set connectNulls on <Line> to draw straight across the gap instead.

Can I mix a straight line and a curve on one chart?

Yes. type belongs to each <Line>, so a measured series can stay linear while a projection uses natural and strokeDasharray="4 4".

Can people reach each month without a mouse?

Yes. accessibilityLayer makes <LineChart> focusable, and the arrow keys move the active point and its tooltip from month to month.

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