Line Chart – React component

"use client";

import { LineChart } from "@/siteplane/components/line-chart";

const activeUsers = [
  { month: "Jan", users: 1840 },
  { month: "Feb", users: 2210 },
  { month: "Mar", users: 2050 },
  { month: "Apr", users: 2630 },
  { month: "May", users: 2980 },
  { month: "Jun", users: 2760 },
  { month: "Jul", users: 3120 },
  { month: "Aug", users: 3410 },
  { month: "Sep", users: 3280 },
  { month: "Oct", users: 3690 },
  { month: "Nov", users: 4020 },
  { month: "Dec", users: 4350 },
];

export default function Example() {
  return (
    <div className="w-full max-w-xl">
      <LineChart
        data={activeUsers}
        label="Active users by month"
        series={[{ key: "users", label: "Active users" }]}
        x="month"
      />
    </div>
  );
}

A line chart shows how one or several measures rise and fall over time or across ordered categories, such as months. Each series is a line on one shared value axis, in a shade of the brand color by default. Hover the plot to read every series at the nearest point, or focus it and step through the points with the arrow keys; the card trails beside the crosshair.

Installation

pnpm dlx shadcn@4.18.0 add @siteplane/line-chart

Complete the one-time setup first. Registry JSON lists source files and dependencies.

For this page’s examples, also install:

pnpm dlx shadcn@4.18.0 add @siteplane/card @siteplane/toggle-group

Usage

import { LineChart } from "@/siteplane/components/line-chart";

<LineChart
  label="Active users by month"
  data={[
    { month: "Jan", users: 1840 },
    { month: "Feb", users: 2210 },
    { month: "Mar", users: 2050 },
  ]}
  x="month"
  series={[{ key: "users", label: "Active users" }]}
/>;

x names the key of the x value in each row, and each series names the key of its numbers.

Multiple lines

Pass several series to draw a line for each on the same value axis. A series that names no color takes a shade of the brand color, from strong to light, spread over the number of series. The tooltip lists every series at the active point, and the legend names them below the plot.

Desktop
Mobile
Tablet

"use client";

import { LineChart } from "@/siteplane/components/line-chart";

const sessions = [
  { month: "Jan", desktop: 4210, mobile: 3120, tablet: 640 },
  { month: "Feb", desktop: 4380, mobile: 3540, tablet: 610 },
  { month: "Mar", desktop: 4290, mobile: 3890, tablet: 680 },
  { month: "Apr", desktop: 4510, mobile: 4360, tablet: 720 },
  { month: "May", desktop: 4640, mobile: 4870, tablet: 690 },
  { month: "Jun", desktop: 4720, mobile: 5340, tablet: 760 },
];

export default function Example() {
  return (
    <div className="w-full max-w-xl">
      <LineChart
        data={sessions}
        label="Sessions by device and month"
        series={[
          { key: "desktop", label: "Desktop" },
          { key: "mobile", label: "Mobile" },
          { key: "tablet", label: "Tablet" },
        ]}
        x="month"
      />
    </div>
  );
}

Categorical palette

palette="categorical" gives each series its own chart color, --chart-1 to --chart-8, and the eight colors repeat after the eighth series. A color on a series always wins. Pass formatValue to write the values in the tooltip and on the value axis, here as percentages.

Email
Search
Social

"use client";

import { LineChart } from "@/siteplane/components/line-chart";

const conversion = [
  { month: "Jan", email: 5.1, search: 3.2, social: 1.2 },
  { month: "Feb", email: 4.8, search: 3.5, social: 1.5 },
  { month: "Mar", email: 5.4, search: 3.4, social: 1.4 },
  { month: "Apr", email: 5.2, search: 3.8, social: 1.9 },
  { month: "May", email: 5.6, search: 4.1, social: 2.2 },
  { month: "Jun", email: 5.9, search: 4.3, social: 2.1 },
];

export default function Example() {
  return (
    <div className="w-full max-w-xl">
      <LineChart
        data={conversion}
        formatValue={(value) => `${value}%`}
        label="Conversion rate by channel"
        palette="categorical"
        series={[
          { key: "email", label: "Email" },
          { key: "search", label: "Search" },
          { key: "social", label: "Social" },
        ]}
        x="month"
      />
    </div>
  );
}

Curves

curve sets how the line joins its points. monotone, the default, bends through every point and never swings past the data, so a line never dips below 0 or rises above its highest value, however large the numbers are. smooth is a natural spline that bends evenly across the points and can swing a little past the data between two of them. linear draws straight segments, and step holds each value until the middle between two points.

monotone (default)

smooth

linear

step

"use client";

import { LineChart } from "@/siteplane/components/line-chart";

const orders = [
  { hour: "8 AM", orders: 17 },
  { hour: "9 AM", orders: 16 },
  { hour: "10 AM", orders: 24 },
  { hour: "11 AM", orders: 36 },
  { hour: "12 PM", orders: 35 },
  { hour: "1 PM", orders: 21 },
  { hour: "2 PM", orders: 14 },
  { hour: "3 PM", orders: 15 },
  { hour: "4 PM", orders: 22 },
  { hour: "5 PM", orders: 32 },
  { hour: "6 PM", orders: 33 },
  { hour: "7 PM", orders: 20 },
];

const curves = ["monotone", "smooth", "linear", "step"] as const;

export default function Example() {
  return (
    <div className="grid w-full max-w-xl gap-x-8 gap-y-6 sm:grid-cols-2">
      {curves.map((curve) => (
        <div className="grid min-w-0 gap-2" key={curve}>
          <p className="text-xs text-muted-foreground">
            {curve === "monotone" ? "monotone (default)" : curve}
          </p>
          <LineChart
            curve={curve}
            data={orders}
            height={180}
            label={`Orders per hour, ${curve} curve`}
            series={[{ key: "orders", label: "Orders" }]}
            x="hour"
          />
        </div>
      ))}
    </div>
  );
}

Dots

Set dots to mark every point with a dot. While a point is active, the dots outside the stretch around it step back with their line.

"use client";

import { LineChart } from "@/siteplane/components/line-chart";

const deploys = [
  { day: "Mon", deploys: 14 },
  { day: "Tue", deploys: 22 },
  { day: "Wed", deploys: 19 },
  { day: "Thu", deploys: 27 },
  { day: "Fri", deploys: 11 },
  { day: "Sat", deploys: 3 },
  { day: "Sun", deploys: 2 },
];

export default function Example() {
  return (
    <div className="w-full max-w-xl">
      <LineChart
        data={deploys}
        dots
        label="Deploys per day this week"
        series={[{ key: "deploys", label: "Deploys" }]}
        x="day"
      />
    </div>
  );
}

Dates

Pass Date objects as x values for a time axis: the rows are placed by their dates, and the labels fall on calendar days, weeks or months, as many as fit. Date values on the x axis are written in UTC, so use dates at midnight UTC for days. Text values are categories, shown in the order given. The axis writes a day as Sep 3 and the tooltip as Sep 3, 2026; pass formatX to write them another way.

"use client";

import { LineChart } from "@/siteplane/components/line-chart";

const signups = [
  118, 124, 131, 109, 68, 72, 126, 134, 129, 141, 117, 74, 79, 138, 146, 152,
  149, 126, 81, 85, 151, 158, 163, 171, 139, 88, 93, 165, 174, 181,
];

// One row per day of September 2026, each date at midnight UTC.
const data = signups.map((count, index) => ({
  date: new Date(Date.UTC(2026, 8, index + 1)),
  signups: count,
}));

export default function Example() {
  return (
    <div className="w-full max-w-xl">
      <LineChart
        data={data}
        label="Signups per day in September"
        series={[{ key: "signups", label: "Signups" }]}
        x="date"
      />
    </div>
  );
}

Fill height

With height="fill", the chart is as tall as its box, which takes its height from the container: a flex item that grows, a grid cell, or a box with a height of its own. The chart never goes lower than minHeight, 240 px by default, and keeps that height until it has measured its box, on the server too. Its own content never makes the box taller, so a card can hand the chart whatever room the rest of the card leaves. Here the grid row is as tall as the list beside the chart, and the chart fills the room its card leaves in that row. The Bar Chart fills its box the same way.

Active users

January to June

Top countries

Active users in June

United States812
Germany455
United Kingdom318
France267
Canada214
Japan196
Brazil143
Spain121

"use client";

import {
  Card,
  CardDescription,
  CardHeader,
  CardPanel,
  CardTitle,
} from "@/siteplane/components/card";
import { LineChart } from "@/siteplane/components/line-chart";

const activeUsers = [
  { month: "Jan", users: 1840 },
  { month: "Feb", users: 2210 },
  { month: "Mar", users: 2050 },
  { month: "Apr", users: 2630 },
  { month: "May", users: 2980 },
  { month: "Jun", users: 2760 },
];

const countries = [
  { name: "United States", users: "812" },
  { name: "Germany", users: "455" },
  { name: "United Kingdom", users: "318" },
  { name: "France", users: "267" },
  { name: "Canada", users: "214" },
  { name: "Japan", users: "196" },
  { name: "Brazil", users: "143" },
  { name: "Spain", users: "121" },
];

export default function Example() {
  return (
    <div className="grid w-full max-w-xl gap-4 sm:grid-cols-[minmax(0,1fr)_12rem]">
      <Card>
        <CardHeader>
          <CardTitle>Active users</CardTitle>
          <CardDescription>January to June</CardDescription>
        </CardHeader>
        <CardPanel className="flex flex-col">
          <LineChart
            className="flex-1"
            data={activeUsers}
            height="fill"
            label="Active users by month"
            minHeight={160}
            series={[{ key: "users", label: "Active users" }]}
            x="month"
          />
        </CardPanel>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Top countries</CardTitle>
          <CardDescription>Active users in June</CardDescription>
        </CardHeader>
        <CardPanel>
          <ul className="grid gap-3 text-sm">
            {countries.map((country) => (
              <li className="flex justify-between gap-4" key={country.name}>
                <span className="truncate">{country.name}</span>
                <span className="text-muted-foreground tabular-nums">
                  {country.users}
                </span>
              </li>
            ))}
          </ul>
        </CardPanel>
      </Card>
    </div>
  );
}

Changing data

New data glides in: the lines morph to it, whatever its length, and the value axis moves with them. Axis labels fade through, the old ones out before the new ones in. A series with a gap or a single point, and a change in the number of series, show at once.

Visits
Returning

"use client";

import { useState } from "react";
import { LineChart } from "@/siteplane/components/line-chart";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/siteplane/components/toggle-group";

const periods = [
  { days: "7", label: "7 days" },
  { days: "30", label: "30 days" },
  { days: "90", label: "90 days" },
];

const day = 24 * 60 * 60 * 1000;
const lastDay = Date.UTC(2026, 8, 30);

// The visits of a day follow from its date, so every period ends on the same days.
function visitsFor(days: number) {
  return Array.from({ length: days }, (_, index) => {
    const time = lastDay - (days - 1 - index) * day;
    const t = time / day;
    const visits = Math.round(
      1800 + 380 * Math.sin(t / 2.6) + 240 * Math.cos(t / 7.3),
    );
    return {
      date: new Date(time),
      returning: Math.round(visits * 0.42 + 90 * Math.sin(t / 3.9)),
      visits,
    };
  });
}

export default function Example() {
  const [days, setDays] = useState("30");

  return (
    <div className="grid w-full max-w-xl gap-4">
      <ToggleGroup
        aria-label="Period"
        onValueChange={(next) => {
          if (next[0]) setDays(next[0]);
        }}
        size="sm"
        value={[days]}
        variant="outline"
      >
        {periods.map((period) => (
          <ToggleGroupItem key={period.days} value={period.days}>
            {period.label}
          </ToggleGroupItem>
        ))}
      </ToggleGroup>
      <LineChart
        data={visitsFor(Number(days))}
        label="Visits and returning visitors by day"
        series={[
          { key: "visits", label: "Visits" },
          { key: "returning", label: "Returning" },
        ]}
        x="date"
      />
    </div>
  );
}

API reference

Component properties
Prop	Type	Default	Description
`LineChart.data`	`readonly ChartDatum[]`	`required`	Rows of the chart: an x value and one number per series.
`LineChart.x`	`string`	`required`	Key of the x value in each row: category text, or a Date for a time axis.
`LineChart.series`	`readonly ChartSeries[]`	`required`	The series to draw, in order.
`LineChart.label`	`string`	`required`	Accessible name of the chart.
`LineChart.aria-describedby`	`string`	`unset`	Id of an element that describes the chart, read after the summary of the data that the chart gives screen readers.
`LineChart.curve`	`monotone \| smooth \| linear \| step`	`monotone`	How the points are joined: monotone bends through every point and never swings past the data, smooth is a natural spline that can swing a little past the data between two points, linear draws straight segments and step holds each value until the middle between two points.
`LineChart.dots`	`boolean`	`false`	Marks every point with a dot. A point on its own always has one.
`LineChart.height`	`number \| fill`	`240`	Height of the chart in pixels, the legend included, or fill to take the height of its box down to minHeight; the width follows the container.
`LineChart.minHeight`	`number`	`240`	With height fill, the least height of the chart in pixels, the legend included.
`LineChart.palette`	`brand \| categorical`	`brand`	brand shades the brand color from strong to light; categorical gives each series its own chart color. A series’ own color wins either way.
`LineChart.legend`	`boolean`	`true with more than one series`	Lists the series below the plot.
`LineChart.grid`	`boolean`	`true`	Grid lines at the value axis ticks.
`LineChart.xAxis`	`boolean`	`true`	Labels along the x axis.
`LineChart.yAxis`	`boolean`	`true`	Labels along the value axis.
`LineChart.formatValue`	`(value: number) => string`	`locale number (1,234.5); compact on the axis (1.2K)`	Formats values in the tooltip and on the value axis.
`LineChart.formatX`	`(value: ChartXValue) => string`	`text as given; a date as Jan 5, and Jan 5, 2026 in the tooltip`	Formats x values on the axis and in the tooltip heading.
`LineChart.locale`	`string`	`en-US`	Locale of numbers and dates.
`LineChart.emptyLabel`	`string`	`No data`	Shown in place of the marks when there is nothing to draw.
`LineChart.labels`	`Partial<CartesianChartLabels>`	`English words`	Replaces the words that the chart gives screen readers, each one on its own. Pass their translation when the application is in another language.
`LineChart.className`	`string`	`unset`	Additional classes.
`ChartSeries.key`	`string`	`required`	Key of the numbers of this series in each row.
`ChartSeries.label`	`string`	`required`	Name shown in the legend and the tooltip.
`ChartSeries.color`	`string`	`palette color`	A CSS color, such as var(--chart-3), that replaces the palette color of this series.
`CartesianChartLabels.roleDescription`	`string`	`chart`	What screen readers call the chart.
`CartesianChartLabels.keyboardHint`	`string`	`Use the arrow keys to move between data points.`	Read after the description of the chart while it is a focus stop. An empty text leaves the hint out.
`CartesianChartLabels.to`	`string`	`to`	Joins the first and the last x value in the summary of the data, as in Jan to Jun.
`CartesianChartLabels.lowest`	`string`	`lowest`	Comes before the lowest value of each series in the summary.
`CartesianChartLabels.highest`	`string`	`highest`	Comes before the highest value of each series in the summary.

LineChartProps exports this contract. ChartDatum, ChartSeries, ChartXValue, ChartCurve, ChartPalette and CartesianChartLabels come from the chart core, @/siteplane/components/chart, which installs with the chart. The chart renders a figure with the plot and, for several series, a legend; it takes no native props or ref beyond className and aria-describedby. The categorical palette has eight chart colors and the brand palette spreads up to eight shades, and both repeat after the eighth series.

Read the installed source.

Usage notes

Use a line chart for a trend over time or over ordered categories, with up to five series. When the categories have no order, such as countries, use a Bar Chart. The axis gives a rough scale and the tooltip one point at a time, so show a Table when readers need exact values. Several series share one value axis, which always includes 0; there is no second axis.

A missing value (null, undefined or anything that is not a number) breaks the line at that point and leaves the series out of the tooltip there. A point on its own is drawn as a dot.

The plot is one focus stop. On hover, focus or tap, the nearest x position becomes the active item, and the chart shows:

a hairline crosshair;
a dot per series that glides to it;
an inverse label on the axis that names the item;
the tooltip card beside the crosshair, trailing it. The card’s values roll to the new ones.

The rest of the chart steps back slightly: the lines go to 80%, and the stretch around the active point stays at full strength. The legend is on by default when there is more than one series, and sits below the plot. A mouse over an entry steps the other series back; the legend does not toggle series, and the chart has no click or selection API.

Left and Right arrow keys step through the x positions, Home and End jump to the ends, and Escape closes the tooltip. Keyboard focus starts at the first x position. A tap or pen press pins the item until the next press elsewhere or Escape. Screen readers meet the plot as a chart named by label. Its description sums up the data with the first and the last x value and the lowest and the highest value of each series; a chart with no value is described by emptyLabel. While the chart is a focus stop, a hint that the arrow keys move between the data points follows the description. labels replaces these words and the role description, for example with their translation. While the keyboard or a tap moves between the items, a polite live region reads what the tooltip shows. Each row of the tooltip names its series, so the color never carries the information alone. A chart with no values is not a focus stop.

Everything that moves runs on the Motion tokens: new data glides over --motion-duration-value, and the crosshair, the dots and the axis label follow the active item over --motion-duration-follow, with the card trailing over --motion-duration-follow-trail. All of it is instant under reduced motion: the system setting, html with data-motion-reduce="true" or SiteplaneMotionProvider preset="reduced". The chart draws its plot once it has measured the width of its container. Until then, and in the server HTML, it renders the box of the plot at its full height, the legend and what screen readers read, so nothing on the page moves when the plot appears. The tooltip comes from Tooltip. The chart opens and closes it itself, so it needs no TooltipProvider, which only shares hover delays between tooltips.