Area Chart

Values over time as filled areas: one series, several, or stacked into a total, with a dashed one for a comparison. Plain SVG.

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

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/area-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/area-chart

Usage

example.tsx

1import { AreaChart } from "@/components/dashral/area-chart"
2
3<AreaChart
4  data={[
5    { month: "Jan", revenue: 4200, costs: 2400 },
6    { month: "Feb", revenue: 5100, costs: 2600 },
7    { month: "Mar", revenue: 6300, costs: 2900 },
8  ]}
9  index="month"
10  series={[
11    { key: "revenue", label: "Revenue" },
12    { key: "costs", label: "Costs" },
13  ]}
14  formatOptions={{ style: "currency", currency: "USD" }}
15  aria-label="Revenue and costs by month"
16/>

Examples

Stacked channels

stacked puts the series on one another, so the top line is their total.

Online store
Retail
Partners

Against the period before

A dashed series for the comparison; switching the range moves the chart to its new shape.

Revenue

$54,245

+31% on the period before

This period
The period before

API reference

AreaChart

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.	—
`stacked`	`boolean` Puts the series on one another, so the top line is their total.	`false`
`curve`	`"smooth" \| "linear" \| "step"` Smooth never bends past a value it didn't have.	`"smooth"`
`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 areas to their new shape (in browsers that animate SVG paths). Instant with reduced motion.