# Animated Bar Chart
URL: https://remocn.dev/docs/ui-blocks/animated-bar-chart

Bars spring up from the baseline with a staggered cascade

- Install: `npx shadcn@latest add @remocn/animated-bar-chart`
- Vibe: data
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/animated-bar-chart
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AnimatedBarChart } from "@/components/remocn/animated-bar-chart";

const AnimatedBarChartScene = () => (
  <AnimatedBarChart
    data={[35, 60, 45, 80, 55, 70, 90, 65]}
    barColor="#0ea5e9"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="AnimatedBarChart"
    component={AnimatedBarChartScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);
```

### With Backdrop

Renders transparent — supply the background via `Backdrop`:

```tsx
import { Backdrop } from "@/components/remocn/backdrop";
import { AnimatedBarChart } from "@/components/remocn/animated-bar-chart";

<Backdrop fill={{ type: "color", value: "#0a0a0a" }}>
  <AnimatedBarChart data={[35, 60, 45, 80, 55, 70, 90, 65]} barColor="#0ea5e9" />
</Backdrop>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `data` | `number[]` | `[35, 60, 45, 80, 55, 70, 90, 65]` | Bar values. Auto-scaled to the available height. |
| `labels` | `string[]` | — | Optional labels rendered under each bar |
| `width` | `number` | `1000` | SVG viewBox width |
| `height` | `number` | `500` | SVG viewBox height |
| `barColor` | `string` | `"#0ea5e9"` | Fill color used for every bar |
| `gap` | `number` | `16` | Pixel gap between bars |
| `staggerFrames` | `number` | `6` | Frame delay applied to each successive bar |
| `className` | `string` | — | Optional className passed to the outer container |

## Use when
- Showing comparative categorical metrics in a product demo — feature usage, plan distribution, benchmark scores.
- A business KPI or results slide needs a "data revealed" moment rather than a static screenshot.
- The dataset has a clear winner bar to build to (stagger naturally draws attention to the tallest last).

## Don't use when
- The data represents change over time — continuous trends belong in `animated-line-chart`, not bars.
- You have a single data point; one bar springing up looks degenerate — embed a number counter or use a text animation.