AreaChart

AreaChart fills the area between an ordered series and its baseline, fading from the series color to transparent at the bottom. Use it when the total magnitude of one series matters as much as its direction.

Aster Labs price

import { AreaChart, View } from "density-base-ui";
import { asterLabsPriceSeries } from "../charts/asterLabsPriceSeries";

export default function AreaChartExample() {
  return (
    <View align="start" gap="md" padding={false} style={{ minHeight: "18rem" }}>
      <AreaChart
        aria-label="Aster Labs intraday price"
        color="chart-2"
        data={asterLabsPriceSeries}
        height={288}
        style={{ flex: 1 }}
        title="Aster Labs price"
        yDomain="data"
      />
    </View>
  );
}

data and aria-label are required. AreaChart infers its x scale and uses locale-aware tooltip formatting. size controls the title size; axis labels render one Density size step smaller. emphasis controls their color.

Animate

Set animate to progressively draw the area chart’s trend line from start to end when it mounts. It defaults to false and respects reduced-motion preferences.

import { AreaChart, Button, View } from "density-base-ui";
import { RefreshCw } from "lucide-react";
import { useState } from "react";
import { asterLabsPriceSeries } from "../charts/asterLabsPriceSeries";

export default function AreaChartAnimateExample() {
  const [animationKey, setAnimationKey] = useState(0);

  return (
    <View>
      <AreaChart
        key={animationKey}
        animate
        aria-label="Animated Aster Labs intraday price"
        data={asterLabsPriceSeries}
        yDomain="data"
      />
      <Button onClick={() => setAnimationKey((key) => key + 1)}>
        <RefreshCw aria-hidden="true" size={14} />
        Replay animation
      </Button>
    </View>
  );
}

Y-axis domain

Set yDomain="data" to zoom the y-axis to the observed range with 5% padding on both ends. The default zero keeps the zero baseline visible; data-domain area charts fill to the lower padded range bound.

Aster Labs price

import { AreaChart } from "density-base-ui";
import { asterLabsPriceSeries } from "../charts/asterLabsPriceSeries";

export default function AreaChartYDomainExample() {
  return (
    <AreaChart
      aria-label="Aster Labs price zoomed to the data range"
      data={asterLabsPriceSeries}
      title="Aster Labs price"
      yDomain="data"
    />
  );
}

Color

Chart 1

Chart 2

Chart 3

Chart 4

Chart 5

Chart 6

Positive

Negative

Neutral

import { AreaChart, View } from "density-base-ui";
import { asterLabsPriceSeries as data } from "../charts/asterLabsPriceSeries";

export default function AreaChartColorExample() {
  return (
    <View
      gap="3xl"
      layout="grid"
      padding={false}
      style={{ gridTemplateColumns: "repeat(3, minmax(0, 1fr))" }}
    >
      <AreaChart
        aria-label="Chart 1"
        color="chart-1"
        data={data}
        height={100}
        title="Chart 1"
        yDomain="data"
      />
      <AreaChart
        aria-label="Chart 2"
        color="chart-2"
        data={data}
        height={100}
        title="Chart 2"
        yDomain="data"
      />
      <AreaChart
        aria-label="Chart 3"
        color="chart-3"
        data={data}
        height={100}
        title="Chart 3"
        yDomain="data"
      />
      <AreaChart
        aria-label="Chart 4"
        color="chart-4"
        data={data}
        height={100}
        title="Chart 4"
        yDomain="data"
      />
      <AreaChart
        aria-label="Chart 5"
        color="chart-5"
        data={data}
        height={100}
        title="Chart 5"
        yDomain="data"
      />
      <AreaChart
        aria-label="Chart 6"
        color="chart-6"
        data={data}
        height={100}
        title="Chart 6"
        yDomain="data"
      />
      <AreaChart
        aria-label="Positive"
        color="positive"
        data={data}
        height={100}
        title="Positive"
        yDomain="data"
      />
      <AreaChart
        aria-label="Negative"
        color="negative"
        data={data}
        height={100}
        title="Negative"
        yDomain="data"
      />
      <AreaChart
        aria-label="Neutral"
        color="neutral"
        data={data}
        height={100}
        title="Neutral"
        yDomain="data"
      />
    </View>
  );
}

Emphasis

Primary

Secondary

Outline

Ghost

import { AreaChart, View } from "density-base-ui";
import { asterLabsPriceSeries as data } from "../charts/asterLabsPriceSeries";

export default function AreaChartEmphasisExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <AreaChart
        aria-label="Primary"
        data={data}
        emphasis="primary"
        height={120}
        title="Primary"
        yDomain="data"
      />
      <AreaChart
        aria-label="Secondary"
        data={data}
        emphasis="secondary"
        height={120}
        title="Secondary"
        yDomain="data"
      />
      <AreaChart
        aria-label="Outline"
        data={data}
        emphasis="outline"
        height={120}
        title="Outline"
        yDomain="data"
      />
      <AreaChart
        aria-label="Ghost"
        data={data}
        emphasis="ghost-primary"
        height={120}
        title="Ghost"
        yDomain="data"
      />
    </View>
  );
}

Size

2xs

2xl

3xl

import { AreaChart, View } from "density-base-ui";
import { asterLabsPriceSeries as data } from "../charts/asterLabsPriceSeries";

export default function AreaChartSizeExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <AreaChart
        aria-label="2xs"
        data={data}
        height={100}
        size="2xs"
        title="2xs"
        yDomain="data"
      />
      <AreaChart
        aria-label="xs"
        data={data}
        height={100}
        size="xs"
        title="xs"
        yDomain="data"
      />
      <AreaChart
        aria-label="sm"
        data={data}
        height={100}
        size="sm"
        title="sm"
        yDomain="data"
      />
      <AreaChart
        aria-label="md"
        data={data}
        height={100}
        size="md"
        title="md"
        yDomain="data"
      />
      <AreaChart
        aria-label="lg"
        data={data}
        height={100}
        size="lg"
        title="lg"
        yDomain="data"
      />
      <AreaChart
        aria-label="xl"
        data={data}
        height={100}
        size="xl"
        title="xl"
        yDomain="data"
      />
      <AreaChart
        aria-label="2xl"
        data={data}
        height={100}
        size="2xl"
        title="2xl"
        yDomain="data"
      />
      <AreaChart
        aria-label="3xl"
        data={data}
        height={100}
        size="3xl"
        title="3xl"
        yDomain="data"
      />
    </View>
  );
}

Title

Weekly visitors

Compared with the previous seven days

import { AreaChart } from "density-base-ui";
import { asterLabsPriceSeries as data } from "../charts/asterLabsPriceSeries";

export default function AreaChartTitleExample() {
  return (
    <AreaChart
      aria-label="Weekly visitors"
      data={data}
      title="Weekly visitors"
      subtitle="Compared with the previous seven days"
      yDomain="data"
    />
  );
}

Height

120 pixels

240 pixels

import { AreaChart, View } from "density-base-ui";
import { asterLabsPriceSeries as data } from "../charts/asterLabsPriceSeries";

export default function AreaChartHeightExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <AreaChart
        aria-label="120 pixel chart"
        data={data}
        height={120}
        title="120 pixels"
        yDomain="data"
      />
      <AreaChart
        aria-label="240 pixel chart"
        data={data}
        height={240}
        title="240 pixels"
        yDomain="data"
      />
    </View>
  );
}

Padding

Set padding to add outer spacing around the frame without changing the plotted area’s geometry.

Aster Labs price

import { AreaChart } from "density-base-ui";
import { asterLabsPriceSeries } from "../charts/asterLabsPriceSeries";

export default function AreaChartPaddingExample() {
  return (
    <AreaChart
      aria-label="Aster Labs price with padding"
      data={asterLabsPriceSeries}
      padding
      title="Aster Labs price"
      yDomain="data"
    />
  );
}

Spark

Set spark for a compact 32px chart without axes, gridlines, or visible labels. Spark charts still expose their data through keyboard-accessible tooltips.

import { AreaChart, View } from "density-base-ui";
import { asterLabsPriceSeries } from "../charts/asterLabsPriceSeries";

export default function AreaChartSparkExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <AreaChart
        aria-label="Aster Labs intraday price trend"
        color="chart-2"
        data={asterLabsPriceSeries}
        spark
        style={{ width: "160px" }}
      />
    </View>
  );
}

Prop	Values	Required	Default	Behavior	Description
`animate`	`false`, `true`	Not required	—	—	Whether the chart marks animate into view.
`childrenEnd`	`import("@types/react/index").ReactNode`	Not required	—	—	—
`childrenStart`	`import("@types/react/index").ReactNode`	Not required	—	—	—
`color`	`chart-1`, `chart-2`, `chart-3`, `chart-4`, `chart-5`, `chart-6`, `positive`, `negative`, `neutral`	Not required	—	—	—
`data`	`import("density-base-ui/src/index").CartesianChartDatum[]`	Required	—	—	—
`emphasis`	`primary`, `secondary`, `outline`, `ghost-primary`	Not required	—	—	Controls the Density label color used by visible chart annotations.
`height`	`number`	Not required	—	—	—
`padding`	`false`, `true`	Not required	—	—	Outer spacing around the frame; does not affect plotted mark geometry.
`size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	Not required	—	—	Controls the Density label size used by visible chart annotations.
`spark`	`false`, `true`	Not required	—	—	—
`subtitle`	`import("@types/react/index").ReactNode`	Not required	—	—	—
`title`	`import("@types/react/index").ReactNode`	Not required	—	—	—
`yDomain`	`zero`, `data`	Not required	—	—	Whether the y-axis includes zero or zooms to the padded data range.

This component also accepts props from native APIs. They are passed through and intentionally kept out of this focused Density API table.