Line Chart

Values over time as lines, with dashed ones for a target or last year; the axis fits the values so changes show. Plain SVG.

$ pnpm dlx shadcn@latest add https://dashral.com/r/line-chart.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/line-chart.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/line-chart

Usage

example.tsx

1import { LineChart } from "@/components/dashral/line-chart"
2
3<LineChart
4  data={[
5    { day: "2026-10-20", visitors: 1240 },
6    { day: "2026-10-21", visitors: 1380 },
7    { day: "2026-10-22", visitors: 1310 },
8  ]}
9  index="day"
10  series={[{ key: "visitors", label: "Visitors" }]}
11  timeFormat={{ month: "short", day: "numeric" }}
12  aria-label="Visitors by day"
13/>

Examples

Revenue by plan

Several lines with a legend; startAtZero when the size of each matters.

Pro
Team
Starter

Against a target

A dashed target, straight segments (curve="linear") and a dot on every week.

Weekly signups

Ahead of target for three weeks running

Signups
Target

API reference

LineChart

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`data`	`Record<string, string \| number>[]` The rows, in order along the x axis. Required.	—
`index`	`string` The key for the x axis: a label, or a timestamp or ISO date with timeFormat. Required.	—
`series`	`{ key, label, color?, dashed? }[]` What to draw, in order; colors default to --chart-1 … --chart-5. Required.	—
`curve`	`"smooth" \| "linear" \| "step"` Smooth never bends past a value it didn't have.	`"smooth"`
`showDots`	`boolean` A dot on every point, not only the one being read.	`false`
`startAtZero`	`boolean` Starts the axis at zero; by default it fits the values, so changes show.	`false`
`height`	`number` In pixels, axes included; the width follows the container.	`260`
`formatOptions`	`Intl.NumberFormatOptions` How values are written in the tooltip, e.g. { style: "currency", currency: "USD" }; the axis writes them compactly.	—
`timeFormat`	`Intl.DateTimeFormatOptions` Reads the index as dates and writes them like this.	—
`showLegend`	`boolean`	`more than one series`
`showGrid`	`boolean` Dashed lines at the axis values.	`true`
`showYAxis`	`boolean` The values along the left.	`true`
`locale`	`string`	`the LocaleProvider's`
`aria-label`	`string` What the chart shows, e.g. “Revenue by month”.	`"Trend from … to …"`
`classNames`	`{ legend, tooltip }`	—

Keyboard

Keys	Action
`Tab`	Focus the chart
`←`or`→`	Read the previous or next point
`Home`or`End`	The first or last point
`Esc`	Stop reading

Accessibility

A group named by your label (by default, how the first series went); the point you move to with the arrow keys is read out with every series' value.
The x axis runs left to right in every language, as on most charts; the legend and tooltip follow the page's direction.
The tooltip lists every series by name, so nothing depends on telling colors apart.

Motion

Draws in from the left when it first shows; new data moves the lines to their new shape (in browsers that animate SVG paths). Instant with reduced motion.