Area Chart

Mobile

Tablet

Desktop

Installation

pnpm add @blakeui/pro-react

npm install @blakeui/pro-react

yarn add @blakeui/pro-react

bun add @blakeui/pro-react

AreaChart is built on visx for its scales and SVG and the motion library for the entrance reveal and hover animation — it does not use Recharts. Pass a data array (each point has a date plus one numeric field per series) and compose the grid, axes, area series, and tooltip as children using dot notation. Series colors come from the categorical --chart-1 … --chart-5 tokens; the chart's chrome maps onto BlakeUI's neutral tokens automatically.

import {AreaChart} from "@blakeui/pro-react";

const data = [
  {date: new Date(2025, 0, 1), revenue: 12400, costs: 8600},
  {date: new Date(2025, 0, 2), revenue: 13100, costs: 8200},
  // …
];

function App() {
  return (
    <AreaChart data={data}>
      <AreaChart.Grid horizontal />
      <AreaChart.Area dataKey="revenue" fill="var(--chart-1)" name="Revenue" />
      <AreaChart.Area dataKey="costs" fill="var(--chart-2)" name="Costs" />
      <AreaChart.XAxis />
      <AreaChart.YAxis />
      <AreaChart.Tooltip valuePrefix="$" />
    </AreaChart>
  );
}

Anatomy

Import the AreaChart component and access all parts using dot notation.

import {AreaChart} from "@blakeui/pro-react";

<AreaChart>
  <AreaChart.Grid />
  <AreaChart.Area />
  <AreaChart.XAxis />
  <AreaChart.YAxis />
  <AreaChart.Tooltip />
</AreaChart>;

Keyboard & motion

The chart is keyboard-accessible: focus it and use the left/right arrow keys (or Home / End) to move the crosshair across data points. The tooltip and date pill follow, and the active point is announced to screen readers through a live region. The entrance reveal, the value odometer, and the tooltip springs all respect prefers-reduced-motion — when it is set, the chart renders without animation.

Loading state

Set status="loading" to show a skeleton placeholder while data resolves; flip it to "ready" and the chart tweens its y-domain and reveals the series left-to-right. Choose the skeleton treatment with Area's loadingStyle — a pulse segment travelling the stroke, or a soft sweep band.

Mobile

Tablet

Desktop

Loading revenue…

API Reference

AreaChart

The root wrapper. Measures its container, builds the time/value scales, and renders the SVG plus the hover layer.

Prop	Type	Default	Description
`data`	`Record<string, unknown>[]`	—	Chart data — one object per point, each with a date field and one numeric field per series.
`children`	`ReactNode`	—	Chart parts (`AreaChart.Grid`, `AreaChart.Area`,`AreaChart.XAxis`, …).
`xDataKey`	`string`	`"date"`	Key in each point holding the x (date) value.
`margin`	`Partial<{ top; right; bottom; left }>`	`{ top: 40, right: 40, bottom: 40, left: 40 }`	Plot margins around the inner chart area.
`animationDuration`	`number`	`1100`	Entrance reveal duration in ms (cubic-bezier(0.85, 0, 0.15, 1)).
`aspectRatio`	`string`	`"2 / 1"`	CSS aspect ratio of the chart box.
`status`	`"loading" \| "ready"`	`"ready"`	While loading, shows a skeleton and disables interaction. Flipping to ready plays the reveal.
`loadingLabel`	`string`	`""`	Centered caption shown while loading. Empty string hides it.
`yDomainTween`	`boolean`	`true`	Tween the y-domain (skeleton ↔ real data) during a status change instead of snapping.
`yDomainTweenDuration`	`number`	`500`	Duration of the y-domain tween in ms.

Also supports all native div HTML attributes.

AreaChart.Area

A gradient-filled series. Add one per metric; the y-domain fits across all series.

Prop	Type	Default	Description
`dataKey`	`string`	—	Key in each data point for this series' y values.
`fill`	`string`	`"var(--chart-1)"`	Gradient fill color (also the default line color).
`fillOpacity`	`number`	`0.4`	Fill opacity at the top of the gradient.
`gradientToOpacity`	`number`	`0`	Fill opacity at the bottom of the gradient.
`stroke`	`string`	`fill`	Line stroke color.
`strokeWidth`	`number`	`2`	Line stroke width.
`curve`	`CurveFactory`	`curveMonotoneX`	D3 curve interpolation factory.
`showLine`	`boolean`	`true`	Render the stroke line on top of the fill.
`fadeEdges`	`boolean`	`false`	Fade the fill at the left/right edges of the plot.
`name`	`string`	`dataKey`	Legend/tooltip label for the series.
`loadingStroke`	`string`	`"var(--muted)"`	Skeleton stroke color while loading.
`loadingStrokeOpacity`	`number`	`0.5`	Skeleton stroke opacity while loading.
`loadingStyle`	`"pulse" \| "sweep"`	`"pulse"`	Skeleton treatment: a travelling pulse segment or a soft sweep band.

AreaChart.Grid

Prop	Type	Default	Description
`horizontal`	`boolean`	`true`	Render horizontal grid lines.
`vertical`	`boolean`	`false`	Render vertical grid lines.
`numTicksRows`	`number`	`5`	Number of horizontal lines.
`numTicksColumns`	`number`	`5`	Number of vertical lines.
`stroke`	`string`	`"var(--separator)"`	Line color.
`strokeDasharray`	`string`	—	SVG dash pattern. Omit for solid lines.
`loadingStroke`	`string`	`stroke`	Grid line color while loading (dimmed to 0.5 opacity).
`shimmer`	`boolean`	`false`	Sweep a shimmer band across the grid while loading (pulse mode only).
`shimmerStroke`	`string`	`"var(--muted)"`	Shimmer band color.
`shimmerLength`	`number`	`140`	Shimmer band length in px.
`shimmerSpeed`	`number`	`1`	Shimmer speed multiplier (used when shimmerSync is false).
`shimmerSync`	`boolean`	`false`	Lock the shimmer rhythm to the pulse (2.2s traverse + 280ms pause).

AreaChart.XAxis

Prop	Type	Default	Description
`numTicks`	`number`	`5`	Approximate number of ticks (always includes the first + last point).
`tickFormat`	`(date: Date, index: number) => string`	—	Custom tick label formatter.

AreaChart.YAxis

Prop	Type	Default	Description
`numTicks`	`number`	`5`	Approximate number of ticks.
`formatLargeNumbers`	`boolean`	`true`	Format values ≥ 1000 as compact (`12000` → `12k`).
`formatValue`	`(value: number) => string`	—	Custom tick formatter (overrides formatLargeNumbers).
`orientation`	`"left" \| "right"`	`"left"`	Side of the chart the labels render on.

AreaChart.Tooltip

Declares the hover tooltip — the crosshair, per-series dots, the floating panel with interpolated values, and the date pill. Renders nothing on its own.

Prop	Type	Default	Description
`showCrosshair`	`boolean`	`true`	Show the vertical crosshair line.
`showDots`	`boolean`	`true`	Show the per-series dots at the active point.
`showDatePill`	`boolean`	`true`	Show the animated date pill under the crosshair.
`valuePrefix`	`string`	—	Static text rendered before each value (e.g. `$`).

Theming

Series colors are driven by the categorical chart palette (--chart-1 … --chart-5) — set each series' fill. All other chrome maps onto neutral/semantic tokens: grid lines use --separator, the crosshair and axis labels use --muted, and the tooltip panel uses --overlay / --overlay-foreground with --overlay-shadow. Override any token in your theme to restyle the chart.