Line Chart

A line chart for change over a range, with one or more series.

When to use

Use when: Change over a range where the line matters more than the area, or several series that overlap.
Avoid when: Parts of a whole over time; use stacked Area Chart.

Installation

bunx shelf add chart-line

The source lands in src/components/ui/chart-line.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Chart from "@/components/ui/chart-line";

<LineChart aria-label="Visitors by day" data={data}>
  <Chart.Grid />
  <Chart.XAxis dataKey="day" />
  <Chart.YAxis />
  <Chart.Tooltip />
  <Line dataKey="visitors" />
</LineChart>

Built on

Packages: @stylexjs/stylex, recharts
Shelf items: Chart, foundations
Figma: In progress. See Designers and Figma.