Area chart

Updated October 3, 2026

AreaChart draws one dithered area per series, overlapping, stacked, or stacked to fill the height, along a monotone, linear or step curve. Like every DitherCharts chart, it fills its container's width, animates in, moves a cursor with the arrow keys, and keeps a data table for screen readers.

Example

Area Chart

Desktop visitors, January to June

Desktop visitors by month
month	Desktop
Jan	212
Feb	287
Mar	241
Apr	96
May	198
Jun	226

import { AreaChart } from "@/components/dithercharts/area-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", desktop: 212 },
  { month: "Feb", desktop: 287 },
  { month: "Mar", desktop: 241 },
  { month: "Apr", desktop: 96 },
  { month: "May", desktop: 198 },
  { month: "Jun", desktop: 226 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
} satisfies ChartConfig

export function AreaChartDefault() {
  return (
    <AreaChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      height={220}
    />
  )
}

Install

Charts install with DitherCharts Pro. See Installation to log in and import the stylesheet.

npx dithercharts add area-chart

Props

AreaChart props
Prop	Type	Default	Description
datarequired	Type readonly ChartRow[]	Default –	One row per x position, left to right, e.g. `{ month: "Jan", desktop: 186, mobile: 80 }`.
configrequired	Type ChartConfig	Default –	One entry per data key to plot, in draw order: its label and, optionally, its pattern.
xKeyrequired	Type string	Default –	The row key that holds the x label, e.g. "month".
labelrequired	Type string	Default –	Accessible name, e.g. "Monthly revenue". Also captions the table twin.
legend	Type boolean	Default `false`	A legend under the chart whose buttons show and hide series.
curve	Type "monotone" \| "linear" \| "step"	Default `"monotone"`	How the line runs between points.
fill	Type "solid" \| "gradient"	Default `"solid"`	A flat 50% fill, or a fade from the top of the plot to the baseline.
yAxis	Type boolean	Default `false`	Value labels beside the grid lines.
stack	Type "none" \| "stacked" \| "expanded"	Default `"none"`	Series overlap, stack, or stack scaled to fill the height.
tooltip	Type TooltipOptions	Default –	The tooltip's indicator and label, and the x position it opens on at rest.
style	Type StyleId	Default `"bayer4"`	Dither style.
animation	Type "develop" \| "none"	Default `"develop"`	Entrance animation; reduced motion always shows the final frame.
height	Type number	Default `300`	Height in CSS pixels; the width fills the container.
cell	Type number	Default `3`	Dither cell size in CSS pixels.
className	Type string	Default –	Classes on the chart's outer `figure`.

Styles

The dither styles style takes:

"bayer2"
"bayer4"
"bayer8"
"blue-noise"
"halftone"
"crosshatch"
"pixel"
"stipple"
"engraved"
"mezzotint"
"woodcut"
"floyd-steinberg"
"atkinson"
"riemersma"

Keyboard and accessibility

The chart is one Tab stop. Focusing it from the keyboard puts the cursor on the first point, or where the keys last left it; moving focus away clears it. The keys stop at the ends.

Chart keys
Key	Action
`←Left arrow` `→Right arrow`	Previous / next point
`Home` `End`	First / last point
`↑Up arrow` `↓Down arrow`	Previous / next series (2+ series)
`EscEscape`	Dismiss the cursor

Screen readers

The chart's label names it, says how many points it has and lists these keys.
Each key press is announced in a polite live region. Moving the pointer is silent.
The table button under the chart shows its data as a table. Screen readers can reach the table even while it's hidden; clicking a row moves the cursor there and announces it.
With legend, each entry is a toggle button. The last one showing can't be hidden, but its button stays focusable.

On a touch screen, a tap pins the cursor and a tap outside the chart dismisses it.

See every area chart example