Animated Bar Chart

Horizontal or vertical bar chart with staggered entrance animations. Each bar grows from zero when scrolled into view.

chartbardataanimated

bash

# Copy animated-bar-chart.tsx to your project
cp components/ui/animated-bar-chart.tsx your-project/components/ui/animated-bar-chart.tsx

tsx

import { AnimatedBarChart } from "@/components/ui/animated-bar-chart";

tsx

<AnimatedBarChart
  data={[
    { label: "Jan", value: 65 },
    { label: "Feb", value: 85 },
  ]}
  orientation="vertical"
/>

AnimatedBarChart

components/ui/animated-bar-chart.tsx

Preview

Horizontal bars

React92

Next.js78

Svelte42

Angular35

Vertical bars

Horizontal or vertical bar chart with staggered entrance animations. Each bar grows from zero when scrolled into view.

chartbardataanimated

bash

# Copy animated-bar-chart.tsx to your project
cp components/ui/animated-bar-chart.tsx your-project/components/ui/animated-bar-chart.tsx

tsx

import { AnimatedBarChart } from "@/components/ui/animated-bar-chart";

tsx

<AnimatedBarChart
  data={[
    { label: "Jan", value: 65 },
    { label: "Feb", value: 85 },
  ]}
  orientation="vertical"
/>

AnimatedBarChart

components/ui/animated-bar-chart.tsx