Animated Chart
Open in
Default

Basic animated chart with default styling. Toggle between datasets to see the animation.

TV
13.9 h/wk
Social Media
13.1 h/wk
Mobile Games
11.8 h/wk
Music / Podcasts
10.3 h/wk
News / Websites
6.6 h/wk
Reactdefault-example.tsx
<AnimatedChart  columns={[    { title: "TV", value: 13.9, appendString: "h/wk", animationDelay: 0 },    { title: "Social Media", value: 13.1, animationDelay: 0.3 },    // ... more columns  ]}  maxValue={15}  restartOnDataChange={true}/>
Repositioned Top Labels

For charts where values can reach maximum, labels can be repositioned to avoid overlapping with the column bars.

TV
13.9 h/wk
Social Media
13.1 h/wk
Mobile Games
11.8 h/wk
Music / Podcasts
10.3 h/wk
News / Websites
6.6 h/wk
Reactrepositioned-labels-example.tsx
<AnimatedChart  titleClassName="relative -top-10"  columns={[    { title: "Gaming", value: 100, appendString: "%" },    { title: "Online Video", value: 86 },    // ... more columns  ]}  maxValue={100}  restartOnDataChange={true}/>
Colored

Customize colors per column using className props for titles, values, bars, and borders.

TV
12 h/wk
Social Media
10 h/wk
Mobile Games
8 h/wk
Music / Podcasts
6 h/wk
News / Websites
2.6 h/wk
Reactcolored-example.tsx
<AnimatedChart  columns={[    {      title: "TV",      value: 12,      appendString: "h/wk",      className: "bg-blue-500/10",      titleClassName: "text-blue-500",      valueClassName: "text-blue-500",      topBorderClassName: "border-blue-500/50",    },    {      title: "Mobile Games",      value: 8,      appendString: "h/wk",      className: "bg-pink-500/10",      titleClassName: "text-pink-500",      valueClassName: "text-pink-500",      topBorderClassName: "border-pink-500",    },    // ... more columns  ]}  maxValue={15}  restartOnDataChange={true}/>

Features

  • Animated column bars with spring physics using Motion
  • Automatic animation trigger when component enters viewport
  • Optional restart animation on data change via restartOnDataChange prop
  • Configurable animation duration and delay per column for staggered effects
  • Support for prepend/append strings (currency, units, percentages)
  • Per-column styling with className overrides for bars, titles, and values
  • Global styling props that can be overridden at the column level
  • Responsive layout that adapts to container width
  • Fully typed with TypeScript

Component Props

AnimatedChart

  • columns - ColumnData[] (required) - Array of column data
  • maxValue - number (required) - Maximum value for scaling column heights
  • titleClassName - string - Global className for all column titles
  • valueClassName - string - Global className for all column values
  • restartOnDataChange - boolean - When true, columns animate from zero whenever data changes (default: false)
  • className - string - Additional classes for the container

ColumnData

  • title - string (required) - Column title displayed at the top
  • value - number (required) - The numeric value for this column
  • prependString - string - String to prepend before the value (e.g., "$")
  • appendString - string - String to append after the value (e.g., "%", "h/wk")
  • animationDuration - number - Animation duration in seconds (default: 1)
  • animationDelay - number - Animation delay in seconds (default: 0)
  • className - string - ClassName for the animated column bar
  • topBorderClassName - string - ClassName for the column's top border
  • titleClassName - string - ClassName for this column's title (overrides global)
  • valueClassName - string - ClassName for this column's value (overrides global)