A responsive area chart that draws itself in, then follows the pointer, a finger or the arrow keys with a crosshair and tooltip.
| Jan | £28k |
|---|---|
| Feb | £39k |
| Mar | £40k |
| Apr | £36k |
| May | £39k |
| Jun | £51k |
| Jul | £60k |
| Aug | £60k |
| Sep | £56k |
| Oct | £60k |
| Nov | £73k |
| Dec | £81k |
Customize
Usage
import { AreaChart } from "@/components/motionkit/area-chart";
<AreaChart
title="Monthly revenue"
format={(value) => `£${value}k`}
data={[
{ label: "Jan", value: 28 },
{ label: "Feb", value: 39 },
{ label: "Mar", value: 37 },
// …
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Line draw and fill
Scrolls into view
Crosshair follow
Pointer or arrow keys
Analytics dashboards, admin panels, investor updates and case studies: revenue, traffic or usage over time.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/area-chart. It saves the file to components/motionkit and installs its dependencies.
Area Chart is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the chart appears fully drawn and the crosshair jumps rather than springs.
Donut Chart
Segments draw themselves in on scroll; hover, tap or tab to one to lift it and read its value and share in the middle.
KPI Card
A headline number that counts up beside a sparkline that draws itself, with a change badge and hover readout.
Odometer
Every digit rolls on its own wheel to the new value, like a mileage counter, rather than counting up.
| Jan | £28k |
|---|---|
| Feb | £39k |
| Mar | £40k |
| Apr | £36k |
| May | £39k |
| Jun | £51k |
| Jul | £60k |
| Aug | £60k |
| Sep | £56k |
| Oct | £60k |
| Nov | £73k |
| Dec | £81k |
Customize
Usage
import { AreaChart } from "@/components/motionkit/area-chart";
<AreaChart
title="Monthly revenue"
format={(value) => `£${value}k`}
data={[
{ label: "Jan", value: 28 },
{ label: "Feb", value: 39 },
{ label: "Mar", value: 37 },
// …
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Line draw and fill
Scrolls into view
Crosshair follow
Pointer or arrow keys
The live preview is free to explore. Plus unlocks the source for Area Chart and every other premium component.