# Chart Container

> A container component for wrapping charts with title, description, and consistent styling.

**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/chart-container
- Markdown: https://ui.ahmedbna.com/docs/charts/chart-container.md
- Structured JSON (props, usage, source, examples): https://ui.ahmedbna.com/r/ai/chart-container.json
- Install payload (source plus every file it imports): https://ui.ahmedbna.com/r/chart-container.json
- Install: `npx bna-ui add chart-container`
- Registry dependencies: `mode-provider`, `useColorScheme`, `colors`, `useColor`, `globals`, `text`, `view`
- Preview recording: https://demo.ahmedbna.com/0345-chart-container-demo.MOV

---

**Example:** A basic chart container with title and description

```tsx
// components/demo/charts/chart-container/chart-container-demo.tsx
import { ChartContainer } from '@/components/charts/chart-container';
import { LineChart } from '@/components/charts/line-chart';
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' },
];

export function ChartContainerDemo() {
  return (
    <ChartContainer
      title='Monthly Revenue'
      description='Revenue data for the last 6 months'
    >
      <LineChart
        data={sampleData}
        config={{
          height: 200,
          animated: true,
          showGrid: true,
          showLabels: true,
        }}
      />
    </ChartContainer>
  );
}
```

## Installation

### CLI

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

### Manual

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

```tsx
// components/charts/chart-container.tsx
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import { useColor } from '@/hooks/useColor';
import { BORDER_RADIUS } from '@/theme/globals';
import { ViewStyle } from 'react-native';

type Props = {
  title?: string;
  description?: string;
  children: React.ReactNode;
  style?: ViewStyle;
};

export const ChartContainer = ({
  title,
  description,
  children,
  style,
}: Props) => {
  const cardColor = useColor('card');

  return (
    <View
      style={[
        {
          backgroundColor: cardColor,
          borderRadius: BORDER_RADIUS,
          padding: 16,
          width: '100%', // Full container width
        },
        style,
      ]}
    >
      {title && (
        <Text variant='subtitle' style={{ marginBottom: 4 }}>
          {title}
        </Text>
      )}
      {description && (
        <Text variant='caption' style={{ marginBottom: 16 }}>
          {description}
        </Text>
      )}
      {children}
    </View>
  );
};
```

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

## Usage

```tsx
import { ChartContainer } from '@/components/charts/chart-container';
```

```tsx
<ChartContainer
  title='Monthly Revenue'
  description='Revenue data for the last 6 months'
>
  {/* Your chart component goes here */}
</ChartContainer>
```

## Examples

#### Default

**Example:** A basic chart container with title and description

```tsx
// components/demo/charts/chart-container/chart-container-demo.tsx
import { ChartContainer } from '@/components/charts/chart-container';
import { LineChart } from '@/components/charts/line-chart';
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' },
];

export function ChartContainerDemo() {
  return (
    <ChartContainer
      title='Monthly Revenue'
      description='Revenue data for the last 6 months'
    >
      <LineChart
        data={sampleData}
        config={{
          height: 200,
          animated: true,
          showGrid: true,
          showLabels: true,
        }}
      />
    </ChartContainer>
  );
}
```

#### Custom Styling

**Example:** Chart container with custom styling

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

const sampleData = [
  { x: 'Q1', y: 65, label: 'Quarter 1' },
  { x: 'Q2', y: 80, label: 'Quarter 2' },
  { x: 'Q3', y: 75, label: 'Quarter 3' },
  { x: 'Q4', y: 95, label: 'Quarter 4' },
];

export function ChartContainerStyled() {
  const backgroundColor = useColor('indigo');

  return (
    <ChartContainer
      title='Quarterly Growth'
      description='Performance metrics by quarter'
      style={{
        borderWidth: 2,
        borderColor: '#e2e8f0',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        elevation: 3,
        backgroundColor: backgroundColor,
      }}
    >
      <LineChart
        data={sampleData}
        config={{
          height: 180,
          animated: true,
          showGrid: true,
          showLabels: true,
        }}
      />
    </ChartContainer>
  );
}
```

## API Reference

### ChartContainer

A container component that provides consistent styling and layout for charts.

| Prop          | Type        | Description                                     |
| ------------- | ----------- | ----------------------------------------------- |
| `title`       | `string`    | The title displayed above the chart.            |
| `description` | `string`    | The description text displayed below the title. |
| `children`    | `ReactNode` | The chart component to be wrapped.              |
| `style`       | `ViewStyle` | Additional styles to apply to the container.    |

## Accessibility

The ChartContainer component is built with accessibility in mind:

- Uses semantic structure for screen readers
- Proper heading hierarchy with title and description
- Consistent spacing and layout
- Supports dynamic text sizing