# Area Chart

Animated, stacked, stepped, and zoomable area charts.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview base="pixijs" title="Basic Chart" name="area-chart-demo">
  <ChartcnExampleAreaChart />
</ComponentPreview>

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @chartcn/pixijs/area-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install pixi.js
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/pixijs/ui/chart.tsx" title="components/chart/pixijs/chart.tsx" />

      <ComponentSource src="registry/bases/pixijs/ui/renderer.ts" title="components/chart/pixijs/renderer.ts" />

      <ComponentSource src="registry/bases/pixijs/ui/tooltip.ts" title="components/chart/pixijs/tooltip.ts" />

      <ComponentSource src="registry/bases/pixijs/components/cartesian-chart/brush.tsx" title="components/chart/pixijs/cartesian-chart/brush.tsx" />

      <ComponentSource src="registry/bases/pixijs/components/cartesian-chart/types.ts" title="components/chart/pixijs/cartesian-chart/types.ts" />

      <ComponentSource src="registry/bases/pixijs/components/cartesian-chart/cartesian.ts" title="components/chart/pixijs/cartesian-chart/cartesian.ts" />

      <ComponentSource src="registry/bases/pixijs/components/cartesian-chart/cartesian-chart.tsx" title="components/chart/pixijs/cartesian-chart/cartesian-chart.tsx" />

      <ComponentSource src="registry/bases/pixijs/components/area-chart/area-chart.tsx" title="components/chart/pixijs/area-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  ChartcnAreaChart,
  type ChartConfig,
} from "@/components/chart/pixijs/area-chart";
```

```tsx
<ChartcnAreaChart
  config={chartConfig}
  data={data}
  stackType="stacked"
  xDataKey="month"
>
  <ChartcnAreaChart.Grid />
  <ChartcnAreaChart.XAxis dataKey="month" />
  <ChartcnAreaChart.Brush />
  <ChartcnAreaChart.Legend />
  <ChartcnAreaChart.Tooltip />
  <ChartcnAreaChart.Area dataKey="desktop" opacity={0.3} />
  <ChartcnAreaChart.Area dataKey="mobile" opacity={0.3} />
</ChartcnAreaChart>
```

## Examples [#examples]

### Stack types [#stack-types]

<ComponentPreview base="pixijs" className="mb-0" title="stackType='stacked'" name="stacked-type-area-chart-demo">
  <StackedAreaChart />
</ComponentPreview>

<ComponentPreview base="pixijs" title="stackType='expanded'" name="expanded-type-area-chart-demo">
  <ExpandedAreaChart />
</ComponentPreview>

### Step area [#step-area]

<ComponentPreview base="pixijs" title="curveType='step'" name="step-curve-type-area-chart-demo">
  <StepAreaChart />
</ComponentPreview>

### Loading state [#loading-state]

<ComponentPreview base="pixijs" title="isLoading='true'" name="loading-state-area-chart-demo">
  <LoadingAreaChart />
</ComponentPreview>

## API Reference [#api-reference]

### ChartcnAreaChart [#chartcnareachart]

| Prop            | Type                                                  | Default                                 |
| --------------- | ----------------------------------------------------- | --------------------------------------- |
| `data`          | `Data[]`                                              | `required`                              |
| `config`        | `ChartConfig`                                         | `required`                              |
| `children`      | `ReactNode`                                           | -                                       |
| `xDataKey`      | `string`                                              | -                                       |
| `stackType`     | `"default" \| "stacked" \| "expanded" \| "percent"`   | `"default"`                             |
| `curveType`     | `"linear" \| "step" \| "step-before" \| "step-after"` | `"linear"`                              |
| `animation`     | `boolean \| AnimationConfig`                          | `{ duration: 650, easing: "cubicOut" }` |
| `isLoading`     | `boolean`                                             | `false`                                 |
| `showBrush`     | `boolean`                                             | `false`                                 |
| `onBrushChange` | `({ startIndex: number; endIndex: number }) => void`  | -                                       |

### Area [#area]

| Prop           | Type                                                  | Default     |
| -------------- | ----------------------------------------------------- | ----------- |
| `dataKey`      | `string`                                              | `required`  |
| `opacity`      | `number`                                              | `0.28`      |
| `strokeWidth`  | `number`                                              | `2`         |
| `stackId`      | `string`                                              | `"chartcn"` |
| `curveType`    | `"linear" \| "step" \| "step-before" \| "step-after"` | -           |
| `connectNulls` | `boolean`                                             | `false`     |

### Shared parts [#shared-parts]

`Grid`, `XAxis`, `YAxis`, `Brush`, `Legend`, and `Tooltip` accept the concrete props documented by the [Line Chart](/docs/components/pixijs/line-chart#shared-parts).