React components
Animated bar chart
A dynamic bar chart component that visualizes data with smooth animations.
Overview
The AnimatedBarChart component creates a set of vertical bars that animate their height over time. It simulates a live data feed or audio visualizer effect using a combination of sine waves and Gaussian distribution.
Usage
import { AnimatedBarChart } from '@/components/core/animated-bar-chart';
function MyDashboard() {
return (
<div className="relative h-64 w-full">
<AnimatedBarChart
barCount={20}
interval={50}
minValue={10}
maxValue={90}
/>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
barCount? | number | 16 | The number of bars to display in the chart. |
interval? | number | 50 | The update interval in milliseconds. Lower values result in faster animation. |
minValue? | number | 10 | The minimum height percentage for the bars. |
maxValue? | number | 80 | The maximum height percentage for the bars. |