Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Interactive Line Chart

Ninety days of daily visitors as one line, with header buttons that switch between desktop and mobile and show each total, in React with Recharts.

Framework
Charting library

Preview

Preview width

About

Use it when there are two series but only one should be on screen, and the totals matter as much as the shape. The header doubles as a summary: each button shows its series' total for the period. For both series at once, use the Multiple Line Chart; for a filled look with a range select, the Interactive Area Chart.

A monotone line runs through 91 days, April to June 2024, without dots. The x axis prints a date every week or two, and the tooltip shows the full date and the value, labeled Page Views. The chart is 250px tall and fills the card's 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

Usage

import { ChartLineInteractive } from "@/components/charts/chart-line-interactive";
<ChartLineInteractive />

Customize

  • useState holds activeChart. <Line dataKey={activeChart}> draws that series, and its stroke builds var(--color-<key>) from the same key.
  • The header buttons are plain <button> elements with data-active; data-[active=true]:bg-muted/50 shades the selected one, and useMemo sums each series once for its total.
  • type="monotone" and dot={false} keep 91 points readable.
  • <XAxis minTickGap={32}> drops dates that would crowd, and tickFormatter prints them as Apr 10.
  • <ChartTooltipContent nameKey="views" labelFormatter={…} className="w-[150px]" /> shows the full date and labels the value Page Views.

FAQ

How does the series switch work?

Each header button calls setActiveChart. <Line> reads dataKey={activeChart} and builds its stroke from the same key, so the line and its color change together.

How do I add a third series?

Add the field to every row, an entry in chartConfig, and the key to the array the buttons map over, then sum it in the total memo.

How do I add a date range?

Keep the range in state, filter chartData before passing it to <LineChart>, and add a select, as the Interactive Area Chart does with its 7, 30 and 90 day options.

Why don't all the dates show on the axis?

Ninety-one labels would overlap. minTickGap={32} on <XAxis> skips any tick closer than 32px to the previous one, and tickFormatter prints the rest as Apr 10. The tooltip shows the full date.

Why does the tooltip say Page Views, not Desktop?

nameKey="views" on ChartTooltipContent looks the label up in chartConfig.views, Page Views. The header buttons already say which series is active, and labelFormatter prints the full date.

Are the header buttons accessible?

They're native buttons, so Tab reaches them and Enter or Space switches the series. With accessibilityLayer, the chart after them takes focus and the arrow keys move the tooltip day by day.

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