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 } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";
import { asterLabsPriceSeries } from "./asterLabsPriceSeries";

export default function AreaChartExample() {
  return (
    <ExampleStack style={{ minHeight: "18rem", width: "100%" }}>
      <AreaChart
        aria-label="Aster Labs intraday price"
        color="chart-2"
        data={asterLabsPriceSeries}
        height={288}
        style={{ flex: 1 }}
        title="Aster Labs price"
        yDomain="data"
      />
    </ExampleStack>
  );
}

Props

Prop	Values	Default
`data`	`{ x: number \| string \| Date, y: number, label?: string }[]`	None
`aria-label`	string	None
`spark`	`true`, `false`	`false`
`color`	`chart-1` through `chart-6`, `positive`, `negative`, `neutral`	`chart-1`
`emphasis`	`primary`, `secondary`, `outline`, `ghost`	`secondary`
`size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`sm`
`title`	string	None
`height`	number	Responsive default
`yDomain`	`zero`, `data`	`zero`

data and aria-label are required. AreaChart infers its x scale and uses locale-aware tooltip formatting. size controls the title and axis-label size, while emphasis controls their color.

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 "./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 } from "density-base-ui";

const data = [
  { x: "Mon", y: 2 },
  { x: "Tue", y: 5 },
  { x: "Wed", y: 3 },
];

export default function AreaChartColorExample() {
  return (
    <div style={styles.grid}>
      <AreaChart
        aria-label="Chart 1"
        color="chart-1"
        data={data}
        height={100}
        title="Chart 1"
      />
      <AreaChart
        aria-label="Chart 2"
        color="chart-2"
        data={data}
        height={100}
        title="Chart 2"
      />
      <AreaChart
        aria-label="Chart 3"
        color="chart-3"
        data={data}
        height={100}
        title="Chart 3"
      />
      <AreaChart
        aria-label="Chart 4"
        color="chart-4"
        data={data}
        height={100}
        title="Chart 4"
      />
      <AreaChart
        aria-label="Chart 5"
        color="chart-5"
        data={data}
        height={100}
        title="Chart 5"
      />
      <AreaChart
        aria-label="Chart 6"
        color="chart-6"
        data={data}
        height={100}
        title="Chart 6"
      />
      <AreaChart
        aria-label="Positive"
        color="positive"
        data={data}
        height={100}
        title="Positive"
      />
      <AreaChart
        aria-label="Negative"
        color="negative"
        data={data}
        height={100}
        title="Negative"
      />
      <AreaChart
        aria-label="Neutral"
        color="neutral"
        data={data}
        height={100}
        title="Neutral"
      />
    </div>
  );
}

const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Emphasis

Primary

Secondary

Outline

Ghost

import { AreaChart } from "density-base-ui";

const data = [
  { x: "Mon", y: 2 },
  { x: "Tue", y: 5 },
  { x: "Wed", y: 3 },
];

export default function AreaChartEmphasisExample() {
  return (
    <div style={styles.grid}>
      <AreaChart
        aria-label="Primary"
        data={data}
        emphasis="primary"
        height={120}
        title="Primary"
      />
      <AreaChart
        aria-label="Secondary"
        data={data}
        emphasis="secondary"
        height={120}
        title="Secondary"
      />
      <AreaChart
        aria-label="Outline"
        data={data}
        emphasis="outline"
        height={120}
        title="Outline"
      />
      <AreaChart
        aria-label="Ghost"
        data={data}
        emphasis="ghost"
        height={120}
        title="Ghost"
      />
    </div>
  );
}

const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Size

2xs

2xl

3xl

import { AreaChart } from "density-base-ui";

const data = [
  { x: "Mon", y: 2 },
  { x: "Tue", y: 5 },
  { x: "Wed", y: 3 },
];

export default function AreaChartSizeExample() {
  return (
    <div style={styles.grid}>
      <AreaChart
        aria-label="2xs"
        data={data}
        height={100}
        size="2xs"
        title="2xs"
      />
      <AreaChart
        aria-label="xs"
        data={data}
        height={100}
        size="xs"
        title="xs"
      />
      <AreaChart
        aria-label="sm"
        data={data}
        height={100}
        size="sm"
        title="sm"
      />
      <AreaChart
        aria-label="md"
        data={data}
        height={100}
        size="md"
        title="md"
      />
      <AreaChart
        aria-label="lg"
        data={data}
        height={100}
        size="lg"
        title="lg"
      />
      <AreaChart
        aria-label="xl"
        data={data}
        height={100}
        size="xl"
        title="xl"
      />
      <AreaChart
        aria-label="2xl"
        data={data}
        height={100}
        size="2xl"
        title="2xl"
      />
      <AreaChart
        aria-label="3xl"
        data={data}
        height={100}
        size="3xl"
        title="3xl"
      />
    </div>
  );
}

const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Title

Weekly visitors

import { AreaChart } from "density-base-ui";

const data = [
  { x: "Mon", y: 2 },
  { x: "Tue", y: 5 },
  { x: "Wed", y: 3 },
];

export default function AreaChartTitleExample() {
  return (
    <AreaChart
      aria-label="Weekly visitors"
      data={data}
      title="Weekly visitors"
    />
  );
}

Height

120 pixels

240 pixels

import { AreaChart } from "density-base-ui";

const data = [
  { x: "Mon", y: 2 },
  { x: "Tue", y: 5 },
  { x: "Wed", y: 3 },
];

export default function AreaChartHeightExample() {
  return (
    <div style={styles.grid}>
      <AreaChart
        aria-label="120 pixel chart"
        data={data}
        height={120}
        title="120 pixels"
      />
      <AreaChart
        aria-label="240 pixel chart"
        data={data}
        height={240}
        title="240 pixels"
      />
    </div>
  );
}

const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

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 } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";
import { asterLabsPriceSeries } from "./asterLabsPriceSeries";

export default function AreaChartSparkExample() {
  return (
    <ExampleStack style={{ width: "100%" }}>
      <AreaChart
        aria-label="Aster Labs intraday price trend"
        color="chart-2"
        data={asterLabsPriceSeries}
        spark
        style={{ width: "160px" }}
        yDomain="data"
      />
    </ExampleStack>
  );
}