# Area Chart

> Show trends where magnitude or contribution to a total matters.

Source: https://www.honestui.com/docs/charts/area-chart/static

### Basic Chart

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Factory output
const data = [
  { month: "January", finished: 449, scrap: 132 },
  { month: "February", finished: 1127, scrap: 335 },
  { month: "March", finished: 683, scrap: 214 },
  { month: "April", finished: 840, scrap: 285 },
  { month: "May", finished: 594, scrap: 240 },
  { month: "June", finished: 1008, scrap: 301 },
  { month: "July", finished: 536, scrap: 171 },
  { month: "August", finished: 1210, scrap: 385 },
  { month: "September", finished: 830, scrap: 270 },
  { month: "October", finished: 697, scrap: 270 },
  { month: "November", finished: 1047, scrap: 344 },
  { month: "December", finished: 393, scrap: 116 },
];

const chartConfig = {
  finished: {
    label: "Finished units",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  scrap: {
    label: "Scrap units",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
      xDataKey="month"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.Brush formatLabel={(value) => String(value).substring(0, 3)} />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area dataKey="finished" variant="gradient" isClickable>
        <AreaChart.Dot variant="border" />
        <AreaChart.ActiveDot variant="colored-border" />
      </AreaChart.Area>
      <AreaChart.Area dataKey="scrap" variant="gradient" isClickable>
        <AreaChart.Dot variant="border" />
        <AreaChart.ActiveDot variant="colored-border" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

## Overview [#overview]

Use an area chart to show how a value changes over time when its magnitude matters as much as the trend. Stack related series to show how each one contributes to a total. Use a line chart instead when the filled area would make close comparisons harder.

## Anatomy [#anatomy]

`AreaChart` owns the data, configuration, selection, and loading state. Add axes and a grid for context, one or more `Area` parts for the series, and optional `Legend`, `Tooltip`, and `Brush` parts for exploration.

## Accessibility [#accessibility]

Canvas charts need a nearby text summary or data table when exact values or trends are important. Use clear series labels and more than color to distinguish overlapping areas. Tooltip, brush, and direct series selection are pointer-operated; provide equivalent controls when those interactions are required.

## Installation [#installation]

<CommandBlock commands="[&#x22;honestui&#x22;]" />

## Usage [#usage]

`<AreaChart>` owns the data, theme configuration, and shared state. Add axes, a grid, legend, tooltip, brush, and one or more `<AreaChart.Area>` parts as needed. Each Area sets its own fill, stroke, and selection behavior.

```tsx
import { AreaChart, type ChartConfig } from "honestui/charts";
```

```tsx
<AreaChart data={data} config={chartConfig} stackType="stacked">
  <AreaChart.Grid />
  <AreaChart.XAxis dataKey="month" />
  <AreaChart.Brush />
  <AreaChart.Legend isClickable />
  <AreaChart.Tooltip />
  <AreaChart.Area dataKey="finished" variant="gradient" strokeVariant="dashed" isClickable />
  <AreaChart.Area dataKey="scrap" variant="hatched" strokeVariant="solid" isClickable />
</AreaChart>
```

The root compiles its children into an ECharts option and renders the plot on a canvas. The `config` prop maps each series data key to its label and theme colors. See [Chart Config](/docs/charts/chart-config) for the complete shape.

> 
  
    Canvas rendering has two implementation details to keep in mind: multi-color gradients bake into a texture at render size (visually equivalent, rebuilt on resize), and the zoom brush is a themed mini chart driven by ECharts' native `dataZoom` instead of the custom `HonestBrush`.
  


### Loading State [#loading-state]

### isLoading='true'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Weather forecast
const data: { month: string; observed: number; forecast: number }[] = [];

const chartConfig = {
  observed: {
    label: "Observed rainfall",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  forecast: {
    label: "Forecast rainfall",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data} // if isLoading is true, pass empty array → i.e isLoading ? [] : data
      config={chartConfig}
      className="h-full w-full p-4"
      isLoading={true} // [!code highlight]
      stackType="stacked"
      curveType="bump"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="observed" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area dataKey="observed" variant="gradient" isClickable>
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area dataKey="forecast" variant="gradient" isClickable>
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

> 
  
    Pass `isLoading` to show an animated skeleton; use `loadingPoints` to set how many points it draws.
  


## Examples [#examples]

Change `variant` and `strokeVariant` on an `<Area>`, or `curveType` and `stackType` on the chart, to restyle it.

### Hover Highlight [#hover-highlight]

### enableHoverHighlight='true'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Transit ridership
const data = [
  { month: "January", entries: 408, exits: 146 },
  { month: "February", entries: 990, exits: 349 },
  { month: "March", entries: 612, exits: 228 },
  { month: "April", entries: 748, exits: 299 },
  { month: "May", entries: 532, exits: 254 },
  { month: "June", entries: 889, exits: 315 },
  { month: "July", entries: 486, exits: 185 },
  { month: "August", entries: 1065, exits: 399 },
  { month: "September", entries: 734, exits: 284 },
  { month: "October", entries: 622, exits: 284 },
  { month: "November", entries: 923, exits: 358 },
  { month: "December", entries: 365, exits: 130 },
];

const chartConfig = {
  entries: {
    label: "Entries",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  exits: {
    label: "Exits",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
      enableHoverHighlight // [!code highlight]
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="entries" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area dataKey="entries" variant="gradient" isClickable>
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area dataKey="exits" variant="gradient" isClickable>
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### Buffer Line [#buffer-line]

### enableBufferLine='true'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Water demand
const data = [
  { month: "January", residential: 280, commercial: 122 },
  { month: "February", residential: 718, commercial: 325 },
  { month: "March", residential: 438, commercial: 204 },
  { month: "April", residential: 542, commercial: 275 },
  { month: "May", residential: 372, commercial: 230 },
  { month: "June", residential: 642, commercial: 291 },
  { month: "July", residential: 343, commercial: 161 },
  { month: "August", residential: 779, commercial: 374 },
  { month: "September", residential: 524, commercial: 260 },
  { month: "October", residential: 443, commercial: 260 },
  { month: "November", residential: 670, commercial: 334 },
  { month: "December", residential: 256, commercial: 106 },
];

const chartConfig = {
  residential: {
    label: "Residential",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  commercial: {
    label: "Commercial",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
      stackType="stacked"
    >
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.Brush />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area
        dataKey="residential"
        variant="gradient"
        strokeVariant="solid"
        enableBufferLine // [!code highlight]
        isClickable
      >
        <AreaChart.Dot variant="border" />
        <AreaChart.ActiveDot variant="colored-border" />
      </AreaChart.Area>
      <AreaChart.Area
        dataKey="commercial"
        variant="gradient"
        strokeVariant="solid"
        enableBufferLine // [!code highlight]
        isClickable
      >
        <AreaChart.Dot variant="border" />
        <AreaChart.ActiveDot variant="colored-border" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

> 
  
    With `enableBufferLine`, each area's last segment renders as a dashed tail while the rest stays solid, useful for marking projected, estimated, or incomplete data at the end of a series, as in financial charts and forecasting dashboards.
  


### Hover Reveal [#hover-reveal]

### enableHoverReveal='true'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Retail demand
const data = [
  { month: "January", online: 442, stores: 167 },
  { month: "February", online: 1072, stores: 403 },
  { month: "March", online: 661, stores: 261 },
  { month: "April", online: 808, stores: 343 },
  { month: "May", online: 576, stores: 289 },
  { month: "June", online: 962, stores: 365 },
  { month: "July", online: 524, stores: 212 },
  { month: "August", online: 1151, stores: 460 },
  { month: "September", online: 796, stores: 325 },
  { month: "October", online: 673, stores: 325 },
  { month: "November", online: 998, stores: 415 },
  { month: "December", online: 392, stores: 148 },
];

const chartConfig = {
  online: {
    label: "Online orders",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  stores: {
    label: "Store orders",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      enableHoverReveal // [!code highlight]
      stackType="stacked"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.Legend />
      <AreaChart.Tooltip />
      <AreaChart.Area dataKey="online" variant="gradient">
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area dataKey="stores" variant="gradient">
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

> 
  
    With `enableHoverReveal`, hovering colors each area's line and fill only up to the pointer's position and mutes everything past it to a neutral gray, with the active dot riding the cursor, a scrubbing effect for reading a series left-to-right. When not hovering, the chart looks completely normal.
  


### Gradient Colors [#gradient-colors]

### gradient colors

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Hiring funnel
const data = [
  { month: "January", applicants: 307, interviews: 218 },
  { month: "February", applicants: 745, interviews: 552 },
  { month: "March", applicants: 465, interviews: 346 },
  { month: "April", applicants: 569, interviews: 460 },
  { month: "May", applicants: 399, interviews: 380 },
  { month: "June", applicants: 669, interviews: 500 },
  { month: "July", applicants: 370, interviews: 279 },
  { month: "August", applicants: 806, interviews: 630 },
  { month: "September", applicants: 551, interviews: 434 },
  { month: "October", applicants: 470, interviews: 431 },
  { month: "November", applicants: 697, interviews: 572 },
  { month: "December", applicants: 283, interviews: 187 },
];

const chartConfig = {
  applicants: {
    label: "Applicants",
    colors: {
      light: ["red", "orange", "rosybrown", "purple", "blue"], // [!code highlight]
      dark: ["red", "orange", "rosybrown", "purple", "blue"], // [!code highlight]
    },
  },
  interviews: {
    label: "Interviews",
    colors: {
      light: ["gray"],
      dark: ["gray"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area dataKey="applicants" variant="gradient" isClickable>
        <AreaChart.Dot variant="colored-border" />
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area dataKey="interviews" variant="gradient" isClickable>
        <AreaChart.Dot variant="colored-border" />
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### gradient colors - bump

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Parcel volume
const data = [
  { month: "January", scheduled: 273, delivered: 196 },
  { month: "February", scheduled: 663, delivered: 498 },
  { month: "March", scheduled: 416, delivered: 313 },
  { month: "April", scheduled: 510, delivered: 416 },
  { month: "May", scheduled: 355, delivered: 345 },
  { month: "June", scheduled: 596, delivered: 451 },
  { month: "July", scheduled: 332, delivered: 252 },
  { month: "August", scheduled: 720, delivered: 569 },
  { month: "September", scheduled: 489, delivered: 393 },
  { month: "October", scheduled: 419, delivered: 391 },
  { month: "November", scheduled: 622, delivered: 515 },
  { month: "December", scheduled: 255, delivered: 170 },
];

const chartConfig = {
  scheduled: {
    label: "Scheduled",
    colors: {
      light: ["red", "orange", "rosybrown", "purple", "blue"], // [!code highlight]
      dark: ["red", "orange", "rosybrown", "purple", "blue"], // [!code highlight]
    },
  },
  delivered: {
    label: "Delivered",
    colors: {
      light: ["gray"],
      dark: ["gray"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
      curveType="bump"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area dataKey="scheduled" variant="gradient" isClickable>
        <AreaChart.Dot variant="colored-border" />
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area dataKey="delivered" variant="gradient" isClickable>
        <AreaChart.Dot variant="colored-border" />
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### Curve Types [#curve-types]

### curveType='bump'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Course progress
const data = [
  { month: "January", lessons: 313, exercises: 182 },
  { month: "February", lessons: 800, exercises: 484 },
  { month: "March", lessons: 487, exercises: 299 },
  { month: "April", lessons: 602, exercises: 402 },
  { month: "May", lessons: 417, exercises: 331 },
  { month: "June", lessons: 715, exercises: 437 },
  { month: "July", lessons: 382, exercises: 238 },
  { month: "August", lessons: 865, exercises: 555 },
  { month: "September", lessons: 585, exercises: 379 },
  { month: "October", lessons: 493, exercises: 377 },
  { month: "November", lessons: 746, exercises: 501 },
  { month: "December", lessons: 283, exercises: 156 },
];

const chartConfig = {
  lessons: {
    label: "Lessons",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  exercises: {
    label: "Exercises",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
      curveType="bump" // [!code highlight]
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="lessons" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area dataKey="lessons" variant="gradient" isClickable>
        <AreaChart.Dot variant="default" />
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area dataKey="exercises" variant="gradient" isClickable>
        <AreaChart.Dot variant="default" />
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### curveType='step'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Subscription health
const data = [
  { month: "January", activated: 401, retained: 181 },
  { month: "February", activated: 935, retained: 417 },
  { month: "March", activated: 590, retained: 275 },
  { month: "April", activated: 715, retained: 357 },
  { month: "May", activated: 515, retained: 303 },
  { month: "June", activated: 842, retained: 379 },
  { month: "July", activated: 474, retained: 226 },
  { month: "August", activated: 1006, retained: 474 },
  { month: "September", activated: 700, retained: 339 },
  { month: "October", activated: 598, retained: 339 },
  { month: "November", activated: 875, retained: 429 },
  { month: "December", activated: 365, retained: 162 },
];

const chartConfig = {
  activated: {
    label: "Activated",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  retained: {
    label: "Retained",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
      curveType="step" // [!code highlight]
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="activated" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area dataKey="activated" variant="gradient" isClickable>
        <AreaChart.Dot variant="default" />
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area dataKey="retained" variant="gradient" isClickable>
        <AreaChart.Dot variant="default" />
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### curveType='monotoneY'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Library circulation
const data = [
  { month: "January", borrowed: 266, returned: 232 },
  { month: "February", borrowed: 608, returned: 566 },
  { month: "March", borrowed: 393, returned: 360 },
  { month: "April", borrowed: 477, returned: 474 },
  { month: "May", borrowed: 338, returned: 394 },
  { month: "June", borrowed: 549, returned: 514 },
  { month: "July", borrowed: 320, returned: 293 },
  { month: "August", borrowed: 661, returned: 644 },
  { month: "September", borrowed: 455, returned: 448 },
  { month: "October", borrowed: 395, returned: 445 },
  { month: "November", borrowed: 574, returned: 586 },
  { month: "December", borrowed: 255, returned: 201 },
];

const chartConfig = {
  borrowed: {
    label: "Borrowed",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  returned: {
    label: "Returned",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
      curveType="monotoneY" // [!code highlight]
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="borrowed" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area dataKey="borrowed" variant="gradient" isClickable>
        <AreaChart.Dot variant="default" />
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area dataKey="returned" variant="gradient" isClickable>
        <AreaChart.Dot variant="default" />
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### Stack Types [#stack-types]

### stackType='default'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Hotel occupancy
const data = [
  { month: "January", booked: 381, available: 226 },
  { month: "February", booked: 963, available: 593 },
  { month: "March", booked: 585, available: 365 },
  { month: "April", booked: 721, available: 489 },
  { month: "May", booked: 505, available: 401 },
  { month: "June", booked: 862, available: 536 },
  { month: "July", booked: 459, available: 292 },
  { month: "August", booked: 1038, available: 678 },
  { month: "September", booked: 707, available: 461 },
  { month: "October", booked: 595, available: 457 },
  { month: "November", booked: 896, available: 615 },
  { month: "December", booked: 338, available: 191 },
];

const chartConfig = {
  booked: {
    label: "Booked rooms",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  available: {
    label: "Available rooms",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="default" // [!code highlight]
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="booked" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area dataKey="booked" variant="gradient" isClickable>
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area dataKey="available" variant="gradient" isClickable>
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### stackType='stacked'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Wildlife survey
const data = [
  { month: "January", sightings: 367, tagged: 160 },
  { month: "February", sightings: 854, tagged: 363 },
  { month: "March", sightings: 541, tagged: 242 },
  { month: "April", sightings: 656, tagged: 313 },
  { month: "May", sightings: 471, tagged: 268 },
  { month: "June", sightings: 769, tagged: 329 },
  { month: "July", sightings: 436, tagged: 199 },
  { month: "August", sightings: 919, tagged: 413 },
  { month: "September", sightings: 639, tagged: 298 },
  { month: "October", sightings: 547, tagged: 298 },
  { month: "November", sightings: 800, tagged: 372 },
  { month: "December", sightings: 337, tagged: 144 },
];

const chartConfig = {
  sightings: {
    label: "Sightings",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  tagged: {
    label: "Tagged",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked" // [!code highlight]
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="sightings" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area dataKey="sightings" variant="gradient" isClickable>
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area dataKey="tagged" variant="gradient" isClickable>
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### stackType='expanded'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Fundraising
const data = [
  { month: "January", pledged: 482, collected: 153 },
  { month: "February", pledged: 1209, collected: 389 },
  { month: "March", pledged: 732, collected: 247 },
  { month: "April", pledged: 900, collected: 329 },
  { month: "May", pledged: 638, collected: 275 },
  { month: "June", pledged: 1082, collected: 351 },
  { month: "July", pledged: 574, collected: 198 },
  { month: "August", pledged: 1296, collected: 446 },
  { month: "September", pledged: 891, collected: 311 },
  { month: "October", pledged: 748, collected: 311 },
  { month: "November", pledged: 1122, collected: 401 },
  { month: "December", pledged: 420, collected: 134 },
];

const chartConfig = {
  pledged: {
    label: "Pledged",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  collected: {
    label: "Collected",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="expanded" // [!code highlight]
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="pledged" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area dataKey="pledged" variant="gradient" isClickable>
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area dataKey="collected" variant="gradient" isClickable>
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### Stroke Variants [#stroke-variants]

### strokeVariant='solid'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Kitchen throughput
const data = [
  { month: "January", orders: 334, completed: 275 },
  { month: "February", orders: 772, completed: 675 },
  { month: "March", orders: 492, completed: 426 },
  { month: "April", orders: 596, completed: 561 },
  { month: "May", orders: 426, completed: 464 },
  { month: "June", orders: 696, completed: 614 },
  { month: "July", orders: 397, completed: 347 },
  { month: "August", orders: 833, completed: 767 },
  { month: "September", orders: 578, completed: 530 },
  { month: "October", orders: 497, completed: 525 },
  { month: "November", orders: 724, completed: 700 },
  { month: "December", orders: 310, completed: 237 },
];

const chartConfig = {
  orders: {
    label: "Orders",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  completed: {
    label: "Completed",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="orders" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area
        dataKey="orders"
        variant="gradient"
        strokeVariant="solid" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area
        dataKey="completed"
        variant="gradient"
        strokeVariant="solid" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### strokeVariant='dashed'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Crop yield
const data = [
  { month: "January", wheat: 347, barley: 204 },
  { month: "February", wheat: 881, barley: 538 },
  { month: "March", wheat: 536, barley: 332 },
  { month: "April", wheat: 661, barley: 446 },
  { month: "May", wheat: 461, barley: 366 },
  { month: "June", wheat: 788, barley: 486 },
  { month: "July", wheat: 420, barley: 265 },
  { month: "August", wheat: 952, barley: 616 },
  { month: "September", wheat: 646, barley: 420 },
  { month: "October", wheat: 544, barley: 417 },
  { month: "November", wheat: 821, barley: 558 },
  { month: "December", wheat: 311, barley: 173 },
];

const chartConfig = {
  wheat: {
    label: "Wheat",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  barley: {
    label: "Barley",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="wheat" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area
        dataKey="wheat"
        variant="gradient"
        strokeVariant="dashed" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area
        dataKey="barley"
        variant="gradient"
        strokeVariant="dashed" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### strokeVariant='animated-dashed'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Renewable generation
const data = [
  { month: "January", solar: 212, wind: 118 },
  { month: "February", solar: 554, wind: 321 },
  { month: "March", solar: 339, wind: 200 },
  { month: "April", solar: 423, wind: 271 },
  { month: "May", solar: 284, wind: 226 },
  { month: "June", solar: 495, wind: 287 },
  { month: "July", solar: 266, wind: 157 },
  { month: "August", solar: 607, wind: 371 },
  { month: "September", solar: 401, wind: 256 },
  { month: "October", solar: 341, wind: 256 },
  { month: "November", solar: 520, wind: 330 },
  { month: "December", solar: 201, wind: 102 },
];

const chartConfig = {
  solar: {
    label: "Solar",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  wind: {
    label: "Wind",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="solar" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area
        dataKey="solar"
        variant="gradient"
        strokeVariant="animated-dashed" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area
        dataKey="wind"
        variant="gradient"
        strokeVariant="animated-dashed" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### Area Variants [#area-variants]

### variant='gradient'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Cloud consumption
const data = [
  { month: "January", compute: 239, storage: 175 },
  { month: "February", compute: 581, storage: 444 },
  { month: "March", compute: 366, storage: 280 },
  { month: "April", compute: 450, storage: 372 },
  { month: "May", compute: 311, storage: 310 },
  { month: "June", compute: 522, storage: 401 },
  { month: "July", compute: 293, storage: 225 },
  { month: "August", compute: 634, storage: 508 },
  { month: "September", compute: 428, storage: 352 },
  { month: "October", compute: 368, storage: 351 },
  { month: "November", compute: 547, storage: 458 },
  { month: "December", compute: 228, storage: 152 },
];

const chartConfig = {
  compute: {
    label: "Compute",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  storage: {
    label: "Storage",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="compute" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area
        dataKey="compute"
        variant="gradient" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area
        dataKey="storage"
        variant="gradient" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### variant='gradient-reverse'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Housing activity
const data = [
  { month: "January", listings: 340, offers: 240 },
  { month: "February", listings: 827, offers: 607 },
  { month: "March", listings: 514, offers: 379 },
  { month: "April", listings: 629, offers: 503 },
  { month: "May", listings: 444, offers: 415 },
  { month: "June", listings: 742, offers: 550 },
  { month: "July", listings: 409, offers: 306 },
  { month: "August", listings: 892, offers: 692 },
  { month: "September", listings: 612, offers: 475 },
  { month: "October", listings: 520, offers: 471 },
  { month: "November", listings: 773, offers: 629 },
  { month: "December", listings: 310, offers: 205 },
];

const chartConfig = {
  listings: {
    label: "Listings",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  offers: {
    label: "Offers",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="listings" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area
        dataKey="listings"
        variant="gradient-reverse" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area
        dataKey="offers"
        variant="gradient-reverse" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### variant='solid'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Power grid load
const data = [
  { month: "January", baseLoad: 300, peakLoad: 254 },
  { month: "February", baseLoad: 690, peakLoad: 621 },
  { month: "March", baseLoad: 443, peakLoad: 393 },
  { month: "April", baseLoad: 537, peakLoad: 517 },
  { month: "May", baseLoad: 382, peakLoad: 429 },
  { month: "June", baseLoad: 623, peakLoad: 564 },
  { month: "July", baseLoad: 359, peakLoad: 320 },
  { month: "August", baseLoad: 747, peakLoad: 706 },
  { month: "September", baseLoad: 516, peakLoad: 489 },
  { month: "October", baseLoad: 446, peakLoad: 485 },
  { month: "November", baseLoad: 649, peakLoad: 643 },
  { month: "December", baseLoad: 282, peakLoad: 219 },
];

const chartConfig = {
  baseLoad: {
    label: "Base load",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  peakLoad: {
    label: "Peak load",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="baseLoad" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area
        dataKey="baseLoad"
        variant="solid" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area
        dataKey="peakLoad"
        variant="solid" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### variant='dotted'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Fitness activity
const data = [
  { month: "January", cardio: 415, strength: 247 },
  { month: "February", cardio: 1045, strength: 647 },
  { month: "March", cardio: 634, strength: 398 },
  { month: "April", cardio: 781, strength: 533 },
  { month: "May", cardio: 549, strength: 436 },
  { month: "June", cardio: 935, strength: 586 },
  { month: "July", cardio: 497, strength: 319 },
  { month: "August", cardio: 1124, strength: 739 },
  { month: "September", cardio: 769, strength: 502 },
  { month: "October", cardio: 646, strength: 497 },
  { month: "November", cardio: 971, strength: 672 },
  { month: "December", cardio: 365, strength: 209 },
];

const chartConfig = {
  cardio: {
    label: "Cardio minutes",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  strength: {
    label: "Strength minutes",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="cardio" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area
        dataKey="cardio"
        variant="dotted" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area
        dataKey="strength"
        variant="dotted" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### variant='lines'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Treasury cash flow
const data = [
  { month: "January", inflow: 476, outflow: 189 },
  { month: "February", inflow: 1154, outflow: 458 },
  { month: "March", inflow: 710, outflow: 294 },
  { month: "April", inflow: 867, outflow: 386 },
  { month: "May", inflow: 621, outflow: 324 },
  { month: "June", inflow: 1035, outflow: 415 },
  { month: "July", inflow: 563, outflow: 239 },
  { month: "August", inflow: 1237, outflow: 522 },
  { month: "September", inflow: 857, outflow: 366 },
  { month: "October", inflow: 724, outflow: 365 },
  { month: "November", inflow: 1074, outflow: 472 },
  { month: "December", inflow: 420, outflow: 166 },
];

const chartConfig = {
  inflow: {
    label: "Cash in",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  outflow: {
    label: "Cash out",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="inflow" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area
        dataKey="inflow"
        variant="lines" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area
        dataKey="outflow"
        variant="lines" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

### variant='hatched'

```tsx
"use client";

import { AreaChart, type ChartConfig } from "honestui/charts";

// Scenario: Carbon accounting
const data = [
  { month: "January", scopeOne: 374, scopeTwo: 261 },
  { month: "February", scopeOne: 908, scopeTwo: 661 },
  { month: "March", scopeOne: 563, scopeTwo: 412 },
  { month: "April", scopeOne: 688, scopeTwo: 547 },
  { month: "May", scopeOne: 488, scopeTwo: 450 },
  { month: "June", scopeOne: 815, scopeTwo: 600 },
  { month: "July", scopeOne: 447, scopeTwo: 333 },
  { month: "August", scopeOne: 979, scopeTwo: 753 },
  { month: "September", scopeOne: 673, scopeTwo: 516 },
  { month: "October", scopeOne: 571, scopeTwo: 511 },
  { month: "November", scopeOne: 848, scopeTwo: 686 },
  { month: "December", scopeOne: 338, scopeTwo: 223 },
];

const chartConfig = {
  scopeOne: {
    label: "Scope 1",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  scopeTwo: {
    label: "Scope 2",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function ExampleAreaChart() {
  return (
    <AreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
    >
      <AreaChart.Grid />
      <AreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <AreaChart.YAxis dataKey="scopeOne" />
      <AreaChart.Legend isClickable />
      <AreaChart.Tooltip />
      <AreaChart.Area
        dataKey="scopeOne"
        variant="hatched" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
      <AreaChart.Area
        dataKey="scopeTwo"
        variant="hatched" // [!code highlight]
        isClickable
      >
        <AreaChart.ActiveDot variant="default" />
      </AreaChart.Area>
    </AreaChart>
  );
}

```

## API Reference [#api-reference]

Props are grouped by the part they belong to. On canvas each part is declarative config the root compiles.

<ApiHeading>
  AreaChart
</ApiHeading>

The root container. It owns the data, shared selection state, loading skeleton, and optional native `dataZoom` brush. Everything visual is composed as its children and compiled into the ECharts option.


  ### `data`

type: `TData[]`

Chart data, an array of objects, one per data point (`TData extends Record<string, unknown>`).

  ### `config`

type: `ChartConfig`

Defines the chart's series. Each key matches a data key, with a `label` and a per-theme `colors` array. Same contract as every Honest UI chart, see [Chart Config](/docs/charts/chart-config).

  ### `children`

type: `ReactNode`

The composed chart parts, `<Grid />`, `<XAxis />`, `<YAxis />`, `<Legend />`, `<Tooltip />`, and one or more `<Area />`.

  ### `className`

type: `string`

Additional CSS classes for the chart container.

  ### `xDataKey`

type: `keyof TData & string`

Data key for the x-axis categories.

  ### `curveType`

type: `&#x22;linear&#x22; | &#x22;smooth&#x22; | &#x22;bump&#x22; | &#x22;monotone&#x22; | &#x22;monotoneX&#x22; | &#x22;monotoneY&#x22; | &#x22;natural&#x22; | &#x22;step&#x22;` · default: `&#x22;linear&#x22;`

Default curve interpolation inherited by every `<Area />`.

  ### `animation`

type: `boolean` · default: `true`

Master switch for the intro draw-in. Pass `false` to render instantly, regardless of `animationType`.

  ### `animationType`

type: `&#x22;none&#x22; | &#x22;left-to-right&#x22; | &#x22;right-to-left&#x22; | &#x22;center-out&#x22; | &#x22;edges-in&#x22;` · default: `&#x22;left-to-right&#x22;`

The intro animation inherited by every `<Area />`. Any value but `"none"` plays ECharts' native progressive draw-in, the line traces in and dots pop as its front passes(use a direction value to control the reveal origin). `"none"` disables it; OS reduce-motion falls back to `"none"` automatically.

  ### `enableHoverHighlight`

type: `boolean` · default: `false`

Highlights the hovered series by dimming the others, the hover twin of click selection, using the same dim levels.

  ### `enableHoverReveal`

type: `boolean` · default: `false`

On hover, colors each area up to the pointer's x-position and mutes the rest to a neutral gray, with the active dot at the cursor. A standalone hover mode that takes visual precedence over `enableHoverHighlight`; idle, the chart renders normally.

  ### `stackType`

type: `&#x22;default&#x22; | &#x22;stacked&#x22; | &#x22;expanded&#x22;` · default: `&#x22;default&#x22;`

How multiple areas combine, independent, stacked, or normalized to 100%.

  ### `defaultSelectedDataKey`

type: `string | null` · default: `null`

The series selected on first render.

  ### `onSelectionChange`



void">
    Fires when a series is selected or deselected via a clickable `<Area />` or `<Legend />`.

  ### `isLoading`

type: `boolean` · default: `false`

Shows the animated loading skeleton.

  ### `loadingPoints`

type: `number` · default: `14`

Number of points in the loading skeleton.

  ### `chartOptions`



">
    Escape hatch deep-merged into the underlying ECharts option object. See the [ECharts option documentation](https://echarts.apache.org/en/option.html).


<ApiHeading>
  Area
</ApiHeading>

A single area series. Each `<Area />` carries its own fill and stroke config, so a chart can hold any number, each with its own variant, stroke, and clickability.


  ### `dataKey`

type: `string`

The series key. Must exist on both the data rows and the chart `config`.

  ### `variant`

type: `&#x22;gradient&#x22; | &#x22;gradient-reverse&#x22; | &#x22;solid&#x22; | &#x22;dotted&#x22; | &#x22;lines&#x22; | &#x22;hatched&#x22;` · default: `&#x22;gradient&#x22;`

Visual style of the area fill, for this area only. Multi-color configs render the full horizontal gradient faded vertically.

  ### `strokeVariant`

type: `&#x22;solid&#x22; | &#x22;dashed&#x22; | &#x22;animated-dashed&#x22;` · default: `&#x22;dashed&#x22;`

The stroke style for this area.

  ### `strokeWidth`

type: `number` · default: `0.8`

Stroke thickness for this area, in pixels.

  ### `curveType`

type: `&#x22;linear&#x22; | &#x22;smooth&#x22; | &#x22;bump&#x22; | &#x22;monotone&#x22; | &#x22;monotoneX&#x22; | &#x22;monotoneY&#x22; | &#x22;natural&#x22; | &#x22;step&#x22;`

The curve interpolation for this area. Falls back to the chart's `curveType` when omitted.

  ### `animationType`

type: `&#x22;none&#x22; | &#x22;left-to-right&#x22; | &#x22;right-to-left&#x22; | &#x22;center-out&#x22; | &#x22;edges-in&#x22;`

The intro draw-in for this area (the first `<Area />`'s value drives the chart). Falls back to the chart's `animationType` when omitted.

  ### `connectNulls`

type: `boolean` · default: `false`

Whether to connect line segments across null or missing values.

  ### `isClickable`

type: `boolean` · default: `false`

Makes this area selectable on click. When any area is selected, the rest turn semi-transparent.

  ### `enableBufferLine`

type: `boolean` · default: `false`

Renders this area's last segment as a dashed buffer tail while the rest stays solid, useful for projected or incomplete data at the end of a series.

  ### `children`

type: `ReactNode`

Optional `<Dot />` and `<ActiveDot />` config that adds point markers to this area.


<ApiHeading>
  Dot and ActiveDot
</ApiHeading>

Point markers composed inside an `<Area />`. `<Dot />` is the resting marker; `<ActiveDot />` is the hovered marker. They render nothing on their own, the parent `<Area />` reads their `variant`.


  ### `variant`

type: `&#x22;default&#x22; | &#x22;border&#x22; | &#x22;colored-border&#x22;` · default: `&#x22;default&#x22;`

The visual style of the point marker.


<ApiHeading>
  XAxis and YAxis
</ApiHeading>

The category and value axes. Include `<XAxis />` or `<YAxis />` to show each; omit either to hide it. Both hide automatically while loading, and `<YAxis />` formats ticks as percentages when `stackType="expanded"`.


  ### `dataKey`

type: `string`

The data key for the axis values.

  ### `tickFormatter`



string">
    Formats the axis tick labels.

  ### `hideDots`

type: `boolean` · default: `false`

Hides the small tick dots that sit beside this axis's labels.


<ApiHeading>
  Grid
</ApiHeading>

The background grid lines. Include it to draw the dashed horizontal split lines; omit it and they don't. Takes no props.

<ApiHeading>
  Tooltip
</ApiHeading>

The hover tooltip. Include it to enable the tooltip; omit it and none shows. It reads selection state, dimming unselected series in its content.


  ### `variant`

type: `&#x22;default&#x22; | &#x22;frosted-glass&#x22;` · default: `&#x22;default&#x22;`

The visual style of the tooltip surface.

  ### `roundness`

type: `&#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;` · default: `&#x22;lg&#x22;`

Controls the border-radius of the tooltip.

  ### `cursor`

type: `boolean` · default: `true`

Whether the vertical cursor line follows the pointer on hover.


<ApiHeading>
  Legend
</ApiHeading>

The series legend, rendered as HTML above the canvas. Include it to show the legend; omit it and none shows. When `isClickable` is set, each entry toggles selection of its series.


  ### `variant`

type: `&#x22;square&#x22; | &#x22;circle&#x22; | &#x22;circle-outline&#x22; | &#x22;rounded-square&#x22; | &#x22;rounded-square-outline&#x22; | &#x22;vertical-bar&#x22; | &#x22;horizontal-bar&#x22;`

The visual style of the legend indicators.

  ### `align`

type: `&#x22;left&#x22; | &#x22;center&#x22; | &#x22;right&#x22;` · default: `&#x22;right&#x22;`

Horizontal placement of the legend.

  ### `verticalAlign`

type: `&#x22;top&#x22; | &#x22;middle&#x22; | &#x22;bottom&#x22;` · default: `&#x22;top&#x22;`

Vertical placement of the legend.

  ### `isClickable`

type: `boolean` · default: `false`

Lets each legend entry toggle selection of its series.


<ApiHeading>
  Brush
</ApiHeading>

An optional zoom brush below the chart, a themed mini chart driven by ECharts' native `dataZoom`. Include `<AreaChart.Brush />` to render it; dragging the range filters the main chart.


  ### `height`

type: `number` · default: `56`

Height of the brush preview strip in pixels.

  ### `formatLabel`



string">
    Formats the range-handle labels below the brush.

  ### `onChange`



void">
    Fires when the brush selection range changes.