# Area Chart

> A customizable area chart component with gradient fills and smooth animations.

**BNA UI** — a React Native / Expo component library.
These components render through `react-native`, not the DOM: there are no HTML
elements, no Tailwind classes and no Radix primitives. Source is copied into your
project and imported through `@/components/ui/*`, `@/components/charts/*`,
`@/hooks/*` and `@/theme/*`. Colours come from the `useColor` hook rather than
hardcoded hex; sizing tokens (`HEIGHT`, `FONT_SIZE`, `BORDER_RADIUS`, `CORNERS`)
come from `@/theme/globals`.

- Docs: https://ui.ahmedbna.com/docs/charts/area-chart
- Markdown: https://ui.ahmedbna.com/docs/charts/area-chart.md
- Structured JSON (props, usage, source, examples): https://ui.ahmedbna.com/r/ai/area-chart.json
- Install payload (source plus every file it imports): https://ui.ahmedbna.com/r/area-chart.json
- Install: `npx bna-ui add area-chart`
- npm dependencies: `react-native-gesture-handler`, `react-native-reanimated`, `react-native-svg`, `react-native-worklets`
- Registry dependencies: `mode-provider`, `useColorScheme`, `colors`, `useColor`, `globals`, `line-chart`
- Preview recording: https://demo.ahmedbna.com/0330-area-chart-demo.mov

---

**Example:** An area chart with gradient fill and smooth animations

```tsx
// components/demo/charts/area-chart/area-chart-demo.tsx
import { AreaChart } from '@/components/charts/area-chart';
import { ChartContainer } from '@/components/charts/chart-container';
import React from 'react';

const sampleData = [
  { x: 'Jan', y: 100, label: 'January' },
  { x: 'Feb', y: 120, label: 'February' },
  { x: 'Mar', y: 90, label: 'March' },
  { x: 'Apr', y: 140, label: 'April' },
  { x: 'May', y: 110, label: 'May' },
  { x: 'Jun', y: 130, label: 'June' },
];

export function AreaChartDemo() {
  return (
    <ChartContainer
      title='Website Traffic'
      description='Daily visitors with gradient fill'
    >
      <AreaChart
        data={sampleData}
        config={{
          height: 200,
          showGrid: true,
          showLabels: false,
          animated: true,
          duration: 1800,
          gradient: true,
        }}
      />
    </ChartContainer>
  );
}
```

## Installation

### CLI

```bash
npx bna-ui add area-chart
```

### Manual

**1.** Install the required dependencies.

```bash
npm install react-native-svg react-native-reanimated react-native-worklets react-native-gesture-handler
```

**2.** Copy and paste the following code into your project.

```tsx
// components/charts/area-chart.tsx
import { LineChart } from '@/components/charts/line-chart';
import React from 'react';
import { ViewStyle } from 'react-native';

interface ChartConfig {
  width?: number;
  height?: number;
  padding?: number;
  showGrid?: boolean;
  showLabels?: boolean;
  animated?: boolean;
  duration?: number;
  gradient?: boolean;
  interactive?: boolean;
  showYLabels?: boolean;
  yLabelCount?: number;
  yAxisWidth?: number;
}

interface ChartDataPoint {
  x: string | number;
  y: number;
  label?: string;
}

type Props = {
  data: ChartDataPoint[];
  config?: ChartConfig;
  style?: ViewStyle;
};
export const AreaChart = React.memo(({ data, config = {}, style }: Props) => {
  return (
    <LineChart
      data={data}
      config={{ ...config, gradient: true }}
      style={style}
    />
  );
});
```

**3.** Update the import paths to match your project setup.

## Usage

```tsx
import { AreaChart } from '@/components/charts/area-chart';
```

```tsx
const data = [
  { x: 'Jan', y: 100, label: 'January' },
  { x: 'Feb', y: 120, label: 'February' },
  { x: 'Mar', y: 90, label: 'March' },
  { x: 'Apr', y: 140, label: 'April' },
];

<AreaChart
  data={data}
  config={{
    height: 200,
    showGrid: true,
    showLabels: true,
    animated: true,
  }}
/>;
```

## Examples

#### Basic Area Chart

**Example:** An area chart with gradient fill and smooth animations

```tsx
// components/demo/charts/area-chart/area-chart-demo.tsx
import { AreaChart } from '@/components/charts/area-chart';
import { ChartContainer } from '@/components/charts/chart-container';
import React from 'react';

const sampleData = [
  { x: 'Jan', y: 100, label: 'January' },
  { x: 'Feb', y: 120, label: 'February' },
  { x: 'Mar', y: 90, label: 'March' },
  { x: 'Apr', y: 140, label: 'April' },
  { x: 'May', y: 110, label: 'May' },
  { x: 'Jun', y: 130, label: 'June' },
];

export function AreaChartDemo() {
  return (
    <ChartContainer
      title='Website Traffic'
      description='Daily visitors with gradient fill'
    >
      <AreaChart
        data={sampleData}
        config={{
          height: 200,
          showGrid: true,
          showLabels: false,
          animated: true,
          duration: 1800,
          gradient: true,
        }}
      />
    </ChartContainer>
  );
}
```

#### Interactive Area Chart

**Example:** An interactive area chart with touch gestures

```tsx
// components/demo/charts/area-chart/area-chart-interactive.tsx
import { AreaChart } from '@/components/charts/area-chart';
import { ChartContainer } from '@/components/charts/chart-container';
import React from 'react';

const sampleData = [
  { x: 'Jan', y: 4000, label: 'January' },
  { x: 'Feb', y: 3000, label: 'February' },
  { x: 'Mar', y: 5000, label: 'March' },
  { x: 'Apr', y: 4500, label: 'April' },
  { x: 'May', y: 6000, label: 'May' },
  { x: 'Jun', y: 7200, label: 'June' },
  { x: 'Jul', y: 6800, label: 'July' },
];

export function AreaChartInteractive() {
  return (
    <ChartContainer
      title='Interactive User Engagement'
      description='Touch to explore monthly user activity'
    >
      <AreaChart
        data={sampleData}
        config={{
          height: 250,
          showGrid: true,
          showLabels: true,
          animated: true,
          duration: 1500,
          interactive: true,
          showYLabels: true,
          yLabelCount: 5,
        }}
      />
    </ChartContainer>
  );
}
```

#### Styled Area Chart

**Example:** A customized area chart with custom styling

```tsx
// components/demo/charts/area-chart/area-chart-styled.tsx
import { AreaChart } from '@/components/charts/area-chart';
import { ChartContainer } from '@/components/charts/chart-container';
import { useColor } from '@/hooks/useColor';
import React from 'react';

const sampleData = [
  { x: 'Week 1', y: 850, label: 'Week 1' },
  { x: 'Week 2', y: 1200, label: 'Week 2' },
  { x: 'Week 3', y: 980, label: 'Week 3' },
  { x: 'Week 4', y: 1450, label: 'Week 4' },
  { x: 'Week 5', y: 1100, label: 'Week 5' },
  { x: 'Week 6', y: 1650, label: 'Week 6' },
];

export function AreaChartStyled() {
  const borderColor = useColor('border');
  const backgroundColor = useColor('card');

  return (
    <ChartContainer
      title='Weekly Sales Volume'
      description='Styled area chart with custom appearance'
      style={{
        borderWidth: 1,
        borderColor: borderColor,
        backgroundColor: backgroundColor,
        borderRadius: 16,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.15,
        shadowRadius: 12,
        elevation: 6,
        margin: 8,
      }}
    >
      <AreaChart
        data={sampleData}
        config={{
          height: 220,
          showGrid: true,
          showLabels: true,
          animated: true,
          duration: 1800,
          showYLabels: true,
          yLabelCount: 6,
          padding: 24,
        }}
      />
    </ChartContainer>
  );
}
```

#### Large Area Chart

**Example:** An area chart with large data

```tsx
// components/demo/charts/area-chart/area-chart-large.tsx
import { AreaChart } from '@/components/charts/area-chart';
import { ChartContainer } from '@/components/charts/chart-container';
import React from 'react';

const sampleData = [
  { x: 'Jan', y: 65000, label: 'January' },
  { x: 'Feb', y: 80000, label: 'February' },
  { x: 'Mar', y: 75000, label: 'March' },
  { x: 'Apr', y: 95000, label: 'April' },
  { x: 'May', y: 110000, label: 'May' },
  { x: 'Jun', y: 125000, label: 'June' },
  { x: 'Jul', y: 140000, label: 'July' },
  { x: 'Aug', y: 135000, label: 'August' },
  { x: 'Sep', y: 150000, label: 'September' },
  { x: 'Oct', y: 165000, label: 'October' },
  { x: 'Nov', y: 180000, label: 'November' },
  { x: 'Dec', y: 195000, label: 'December' },
];

export function AreaChartLarge() {
  return (
    <ChartContainer
      title='Annual Revenue Growth'
      description='Comprehensive yearly performance data'
    >
      <AreaChart
        data={sampleData}
        config={{
          height: 280,
          showGrid: true,
          showLabels: false,
          animated: true,
          duration: 2500,
          showYLabels: true,
          yLabelCount: 7,
          padding: 20,
        }}
      />
    </ChartContainer>
  );
}
```

## API Reference

### AreaChart

A customizable area chart component with gradient fills and smooth animations. Built on top of the LineChart component with gradient enabled by default.

| Prop     | Type               | Default | Description                                   |
| -------- | ------------------ | ------- | --------------------------------------------- |
| `data`   | `ChartDataPoint[]` | -       | Array of data points to display on the chart. |
| `config` | `ChartConfig`      | `{}`    | Configuration object for chart appearance.    |
| `style`  | `ViewStyle`        | -       | Additional styles to apply to the chart.      |

### ChartDataPoint

| Prop    | Type               | Description                          |
| ------- | ------------------ | ------------------------------------ |
| `x`     | `string \| number` | The x-axis value for the data point. |
| `y`     | `number`           | The y-axis value for the data point. |
| `label` | `string`           | Optional label for the data point.   |

### ChartConfig

| Prop          | Type      | Default | Description                                                |
| ------------- | --------- | ------- | ---------------------------------------------------------- |
| `width`       | `number`  | -       | Fixed width of the chart (auto-sizes if omitted).          |
| `height`      | `number`  | `200`   | Height of the chart.                                       |
| `padding`     | `number`  | `20`    | Padding around the chart.                                  |
| `showGrid`    | `boolean` | `true`  | Whether to show grid lines.                                |
| `showLabels`  | `boolean` | `true`  | Whether to show x-axis labels.                             |
| `animated`    | `boolean` | `true`  | Whether to animate the chart on load.                      |
| `duration`    | `number`  | `1000`  | Animation duration in milliseconds.                        |
| `gradient`    | `boolean` | `true`  | Whether to show gradient fill (always true for AreaChart). |
| `interactive` | `boolean` | `false` | Whether to enable touch interactions.                      |
| `showYLabels` | `boolean` | `true`  | Whether to show y-axis labels.                             |
| `yLabelCount` | `number`  | `5`     | Number of y-axis labels to display.                        |
| `yAxisWidth`  | `number`  | `20`    | Width allocated for y-axis labels.                         |

## Features

- **Gradient Fill**: Beautiful gradient fill under the area by default
- **Smooth Animations**: Built-in animations using React Native Reanimated
- **Interactive Touch**: Optional touch gestures for data exploration
- **Responsive Design**: Automatically adapts to container width
- **Customizable Grid**: Optional grid lines for better readability
- **Curved Lines**: Smooth bezier curves between data points
- **Smart Formatting**: Automatic number formatting (K, M suffixes)
- **Theme Integration**: Uses theme colors for consistent styling

## Differences from LineChart

The AreaChart component is essentially a LineChart with the `gradient` property automatically set to `true`. This creates a filled area under the line with a gradient effect that enhances data visualization for cumulative or volume-based data.

## Use Cases

Area charts are particularly effective for:

- **Time Series Data**: Showing trends over time with emphasis on magnitude
- **Cumulative Values**: Displaying running totals or accumulated values
- **Volume Metrics**: Representing quantities like traffic, sales, or usage
- **Comparative Analysis**: Highlighting the "area under the curve"

## Accessibility

The AreaChart component inherits all accessibility features from LineChart:

- Semantic SVG structure for screen readers
- Proper contrast ratios for visual elements
- Touch targets meet minimum size requirements
- Supports dynamic text sizing
- Keyboard navigation support (when interactive)

## Performance

The component is optimized for performance:

- Uses React Native Reanimated for smooth 60fps animations
- Efficient SVG rendering with minimal re-renders
- Gesture handling optimized for touch interactions
- Automatic cleanup of animation values