Area Chart · Kind UI charts

Loading chart…

Visitors
Month	Visitors
Jan	420
Feb	580
Mar	510
Apr	760
May	680
Jun	910
Jul	840
Aug	1070
Sep	960
Oct	1180
Nov	1110
Dec	1360

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Jan", visitors: 420 },
  { period: "Feb", visitors: 580 },
  { period: "Mar", visitors: 510 },
  { period: "Apr", visitors: 760 },
  { period: "May", visitors: 680 },
  { period: "Jun", visitors: 910 },
  { period: "Jul", visitors: 840 },
  { period: "Aug", visitors: 1070 },
  { period: "Sep", visitors: 960 },
  { period: "Oct", visitors: 1180 },
  { period: "Nov", visitors: 1110 },
  { period: "Dec", visitors: 1360 },
];
const config = {
  visitors: { label: "Visitors", color: "#733bff" },
} satisfies Chart.SeriesConfig;

export function VisitorAreaChart() {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.AreaChart
          data={data}
          animate
          accessibilityLayer
          margin={{ top: 20, right: 32, bottom: 8, left: 0 }}
          aria-label="Monthly visitors"
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.XAxis
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={12}
            height={48}
            interval="preserveStartEnd"
          />
          <Chart.YAxis axisLine={false} tickLine={false} tickMargin={12} width={88} />
          <Chart.AreaSeries dataKey="visitors" type="monotone" strokeWidth={2} fillOpacity={0.22} />
          <Chart.Tooltip />
        </Chart.AreaChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Usage

Add one AreaSeries per measure. Use stackId to stack related series.

Composition

<Chart.Root config={config}>
  <Chart.Legend />
  <Chart.ResponsiveContainer width="100%" height={280}>
    <Chart.AreaChart data={data} animate accessibilityLayer aria-label="Monthly visitors">
      <Chart.CartesianGrid vertical={false} />
      <Chart.XAxis dataKey="period" />
      <Chart.YAxis />
      <Chart.AreaSeries dataKey="visitors" type="monotone" fillOpacity={0.22} />
      <Chart.Tooltip />
    </Chart.AreaChart>
  </Chart.ResponsiveContainer>
</Chart.Root>

Area uses explicit composition, without Line’s configured shortcuts. Place Legend outside the plot; pair Root visibility with its callback for toggles.

Curve types

Choose smooth, linear or step-after interpolation.

Loading chart…

Visitors
Month	Visitors
Jan	420
Feb	580
Mar	510
Apr	760
May	680
Jun	910
Jul	840
Aug	1070
Sep	960
Oct	1180
Nov	1110
Dec	1360

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Jan", visitors: 420 },
  { period: "Feb", visitors: 580 },
  { period: "Mar", visitors: 510 },
  { period: "Apr", visitors: 760 },
  { period: "May", visitors: 680 },
  { period: "Jun", visitors: 910 },
  { period: "Jul", visitors: 840 },
  { period: "Aug", visitors: 1070 },
  { period: "Sep", visitors: 960 },
  { period: "Oct", visitors: 1180 },
  { period: "Nov", visitors: 1110 },
  { period: "Dec", visitors: 1360 },
];
const config = {
  visitors: { label: "Visitors", color: "#733bff" },
} satisfies Chart.SeriesConfig;

export function VisitorAreaCurveChart({
  curve = "monotone",
}: {
  curve?: "monotone" | "linear" | "stepAfter";
} = {}) {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.AreaChart
          data={data}
          animate
          accessibilityLayer
          margin={{ top: 20, right: 32, bottom: 8, left: 0 }}
          aria-label="Monthly visitors"
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.XAxis
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={12}
            height={48}
            interval="preserveStartEnd"
          />
          <Chart.YAxis axisLine={false} tickLine={false} tickMargin={12} width={88} />
          <Chart.AreaSeries dataKey="visitors" type={curve} strokeWidth={2} fillOpacity={0.22} />
          <Chart.Tooltip />
        </Chart.AreaChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Stacked series

Matching stackId values stack desktop and mobile visitors. Legend toggles recalculate the visible stack.

Loading chart…

Visitors by device
Month	Desktop	Mobile
Jan	310	110
Feb	380	200
Mar	340	170
Apr	460	300
May	390	290
Jun	520	390
Jul	450	390
Aug	580	490
Sep	500	460
Oct	610	570
Nov	540	570
Dec	650	710

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import { useState } from "react";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Jan", desktop: 310, mobile: 110 },
  { period: "Feb", desktop: 380, mobile: 200 },
  { period: "Mar", desktop: 340, mobile: 170 },
  { period: "Apr", desktop: 460, mobile: 300 },
  { period: "May", desktop: 390, mobile: 290 },
  { period: "Jun", desktop: 520, mobile: 390 },
  { period: "Jul", desktop: 450, mobile: 390 },
  { period: "Aug", desktop: 580, mobile: 490 },
  { period: "Sep", desktop: 500, mobile: 460 },
  { period: "Oct", desktop: 610, mobile: 570 },
  { period: "Nov", desktop: 540, mobile: 570 },
  { period: "Dec", desktop: 650, mobile: 710 },
];
const config = {
  desktop: { label: "Desktop", color: "#733bff" },
  mobile: { label: "Mobile", color: "#14a39a" },
} satisfies Chart.SeriesConfig;

export function DeviceAreaChart() {
  const [visibleSeries, setVisibleSeries] = useState<string[]>(["desktop", "mobile"]);
  return (
    <Chart.Root
      config={config}
      visibleSeries={visibleSeries}
      onVisibleSeriesChange={setVisibleSeries}
    >
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.AreaChart
          data={data}
          animate
          accessibilityLayer
          margin={{ top: 20, right: 32, bottom: 8, left: 0 }}
          aria-label="Monthly visitors by device"
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.XAxis
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={12}
            height={48}
            interval="preserveStartEnd"
          />
          <Chart.YAxis axisLine={false} tickLine={false} tickMargin={12} width={88} />
          <Chart.AreaSeries
            dataKey="desktop"
            stackId="visitors"
            type="monotone"
            strokeWidth={2}
            fillOpacity={0.35}
          />
          <Chart.AreaSeries
            dataKey="mobile"
            stackId="visitors"
            type="monotone"
            strokeWidth={2}
            fillOpacity={0.35}
          />
          <Chart.Tooltip />
        </Chart.AreaChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Materials

Choose plain, paper, clay or glow.

Loading chart…

Visitors
Month	Visitors
Jan	420
Feb	580
Mar	510
Apr	760
May	680
Jun	910
Jul	840
Aug	1070
Sep	960
Oct	1180
Nov	1110
Dec	1360

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Jan", visitors: 420 },
  { period: "Feb", visitors: 580 },
  { period: "Mar", visitors: 510 },
  { period: "Apr", visitors: 760 },
  { period: "May", visitors: 680 },
  { period: "Jun", visitors: 910 },
  { period: "Jul", visitors: 840 },
  { period: "Aug", visitors: 1070 },
  { period: "Sep", visitors: 960 },
  { period: "Oct", visitors: 1180 },
  { period: "Nov", visitors: 1110 },
  { period: "Dec", visitors: 1360 },
];
const config = {
  visitors: { label: "Visitors", color: "#733bff" },
} satisfies Chart.SeriesConfig;

export function MaterialAreaChart({
  material = "paper",
}: {
  material?: "plain" | "paper" | "clay" | "glow";
} = {}) {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.AreaChart
          data={data}
          animate
          accessibilityLayer
          margin={{ top: 20, right: 32, bottom: 8, left: 0 }}
          aria-label="Monthly visitors"
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.XAxis
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={12}
            height={48}
            interval="preserveStartEnd"
          />
          <Chart.YAxis axisLine={false} tickLine={false} tickMargin={12} width={88} />
          <Chart.AreaSeries
            dataKey="visitors"
            type="monotone"
            strokeWidth={2}
            fillOpacity={0.32}
            material={material}
          />
          <Chart.Tooltip />
        </Chart.AreaChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

API reference

Focused props for the composition above; upstream links cover additional native options.

AreaChart

Compose inside Root and a sized ResponsiveContainer.

Prop	Type	Default	Description
`data`	`Row[]`	—	Observations for explicit series and axes.
`animate`	`boolean \| AreaAnimation`	`false`	Chart-owned entrance and inspection motion; respects reduced motion.
`accessibilityLayer`	`boolean`	`true` in Recharts	Enables arrow-key inspection. Set explicitly in these components.
`aria-label` / `aria-labelledby`	`string`	—	Accessible plot name.
`margin`	`{ top?: number; right?: number; bottom?: number; left?: number }`	`5` each side	Space around plot parts.
`stackOffset`	`"none" \| "expand" \| "wiggle" \| "silhouette" \| "sign" \| "positive"`	`"none"`	Native stack calculation. `"expand"` normalizes stacks; labels and tooltip formatting stay consumer-owned.
`children`	`ReactNode`	—	Explicit axes, areas, grid and tooltip.

See Recharts AreaChart.

AreaSeries

String dataKey values identify config entries. Use seriesKey for numeric keys or accessors when controlling visibility.

Prop	Type	Default	Description
`dataKey`	`string \| number \| ((row: Row) => unknown)`	Required	Value field or accessor.
`seriesKey`	`string`	String `dataKey`	Metadata and visibility identity.
`type`	`"basis" \| "basisClosed" \| "basisOpen" \| "bumpX" \| "bumpY" \| "bump" \| "linear" \| "linearClosed" \| "natural" \| "monotoneX" \| "monotoneY" \| "monotone" \| "step" \| "stepBefore" \| "stepAfter"` or custom curve function	`"linear"`	Native curve interpolation.
`stackId`	`string \| number`	—	Shared identity for stacked series.
`material`	`"plain" \| "paper" \| "clay" \| "glow"`	`"plain"`	Area finish; explicit `shape` or `filter` takes precedence.
`stroke` / `fill`	`string`	Config color	Override outline or fill separately.
`fillOpacity`	`number`	`0.6` in Recharts	Fill transparency; shown components set it explicitly.
`connectNulls`	`boolean`	`false`	Connect missing values instead of leaving gaps.
`hide`	`boolean`	`false`	Hide a series; Root selection also applies.

Numbers and two-value ranges retain native geometry. AreaChart owns motion; per-series animation is disabled. See Recharts Area and material support.

Shared components

Root, SeriesConfig, Legend, Tooltip, Axes and grid, ResponsiveContainer.

Month	Desktop	Mobile
Jan	310	110
Feb	380	200
Mar	340	170
Apr	460	300
May	390	290
Jun	520	390
Jul	450	390
Aug	580	490
Sep	500	460
Oct	610	570
Nov	540	570
Dec	650	710

Month	Desktop	Mobile
Jan	310	110
Feb	380	200
Mar	340	170
Apr	460	300
May	390	290
Jun	520	390
Jul	450	390
Aug	580	490
Sep	500	460
Oct	610	570
Nov	540	570
Dec	650	710

UsageCopy Anchor Link

Curve typesCopy Anchor Link

Stacked seriesCopy Anchor Link

MaterialsCopy Anchor Link

API referenceCopy Anchor Link

AreaChartCopy Anchor Link

AreaSeriesCopy Anchor Link

Shared componentsCopy Anchor Link

On this page

Usage

Curve types

Stacked series

Materials

API reference

AreaChart

AreaSeries

Shared components

Month	Desktop	Mobile
Jan	310	110
Feb	380	200
Mar	340	170
Apr	460	300
May	390	290
Jun	520	390
Jul	450	390
Aug	580	490
Sep	500	460
Oct	610	570
Nov	540	570
Dec	650	710