# Area Chart

> A responsive area chart that draws itself in, then follows the pointer, a finger or the arrow keys with a crosshair and tooltip.

Category: Charts · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/area-chart

## When to use it

Analytics dashboards, admin panels, investor updates and case studies: revenue, traffic or usage over time.

## How it works

A ResizeObserver measures the container, and the chart is drawn in real pixels at that width, so the stroke never stretches. The line is a smooth Catmull-Rom curve through the points, drawn in with pathLength while a clip path reveals the gradient fill in step with it. The axis maximum is rounded up to a tidy number so gridlines land on readable values. Moving the pointer, a finger or the arrow keys picks the nearest point, and a crosshair, a springing dot and a tooltip follow it; the tooltip flips sides past the middle so it never leaves the chart.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/area-chart` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | `AreaPoint[]` |  | Points with a label and a value, in order. |
| `title` | `string` |  | Accessible name and the data table's caption. |
| `format` | `(value: number) => string` |  | Formats the axis and tooltip values. |
| `height` | `number` | `260` | Height in pixels; the width follows the container. |
| `color` | `string` | `"#5FAEB4"` | Line and fill colour. |

## Accessibility

- **Keyboard: Pass.** The chart is focusable: Left and Right step through the points, Home and End jump to the ends.
- **Screen readers: Pass.** Every value is in a visually hidden data table with the chart's title as its caption, and the focused value is announced.
- **Reduced motion: Pass.** With reduced motion on, the chart appears fully drawn and the crosshair jumps rather than springs.
- **Colour contrast: Pass.** Axis labels measure 7.7:1 and the line 7.5:1 against the background.