Bar Chart
Charts
Data Visualization
Animated bar charts with rounded pill design and wave animations for real-time data visualization.
Preview
Two-tone teal bar chart with wave animation
Live
Real-Time Analytics Dashboard
Monitor key metrics, track user engagement, and spot trends instantly.
Static Variant
Bar chart without animation for simple data display
MonTueWedThuFriSatSunMonTue
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
data* | number[] | — | Array of values (percentages) |
animated | boolean | true | Enable wave animation |
color | string | 'teal' | Color theme for bars |
height | number | 128 | Chart height in pixels |
showLabels | boolean | false | Show x-axis labels |
labels | string[] | — | X-axis label array |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
// Bar Chart with wave animation
const bars = [65, 80, 55, 90, 70, 85, 60, 95, 75]
<div className="flex items-end justify-center gap-1.5 h-32">
{bars.map((height, i) => (
<div
key={i}
className="w-3 flex flex-col"
style={{ height: `${height}%` }}
>
{/* Top accent */}
<div className="w-full h-3 shrink-0 bg-teal-300 rounded-full" />
{/* Main bar */}
<div className="w-full flex-1 bg-teal-500 rounded-full" />
</div>
))}
</div>
// Static gradient bars
<div className="flex items-end gap-2 h-40">
{data.map((value, i) => (
<div
key={i}
className="flex-1 bg-linear-to-t from-indigo-500 to-indigo-400 rounded-t-lg"
style={{ height: `${value}%` }}
/>
))}
</div>Features
Built-in functionality
- Wave animation: Smooth wave animation for live data visualization
- Two-tone design: Gradient bars with distinct top accent section
- Responsive: Scales to container size and screen width
- Hover states: Interactive opacity on hover
- Live indicator: Pulsing dot for real-time data
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="img" for chart containeraria-label describes chart dataIndividual bars are decorativeKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Bar chart is not interactive by default |
Notes
- Consider providing data table alternative
- Color is not the only indicator of values
- Screen readers should announce chart summary