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 animationconst 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-secondary-default 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