---
title: AreaChart
description: An area chart displays quantitative data graphically. It is based on the line chart but the area between x-axis and line is emphasized with color.
category: Charts
order: 2
---

import DemoIndex from './demos/index.tsx?demo';
import DemoExample from './demos/example.tsx?demo';
import DemoClickEvent from './demos/clickEvent.tsx?demo';
import DemoCustomTooltip from './demos/customTooltip.tsx?demo';
import DemoCustomColors from './demos/customColors.tsx?demo';
import DemoAxis from './demos/axis.tsx?demo';

<Demo of={DemoIndex} layout="bare" />

## Usage example

The example below shows a composition combining an `AreaChart` with text elements.

<Demo of={DemoExample} />

## Usage example with click event

The example below shows an interacive chart using the `onValueChange` prop.

<Demo of={DemoClickEvent} />

## Usage example with custom tooltip

The example below shows a custom tooltip using `customTooltip` prop.

<Demo of={DemoCustomTooltip} />

## Usage example with a custom colors

The example below shows a chart with custom `colors`.

<Demo of={DemoCustomColors} />

## Usage example with x-axis and y-axis labels

The example below shows added axis labels using `xAxisLabel` and `yAxisLabel` prop.

<Demo of={DemoAxis} />

## API

<Api name="AreaChart" />