Horizontal Bar Chart

Charts
Data Visualization

Visualize rankings, comparisons, and proportions with horizontal bars, rank badges, and change indicators.

Preview

Ranked horizontal bars with values and change indicators

Tasks by Project

1
Marketing Strategy
4,200
↑ 12%
2
Content Pipeline
3,100
↑ 8%
3
Product Launch
2,800
↓ 3%
4
Team Operations
2,400
↑ 15%
5
Research & Planning
1,900
↑ 5%

Simple Variant

Minimal horizontal bars without ranks

Chrome65%
Safari20%
Firefox10%
Other5%

Props

Component API reference

PropTypeDefaultDescription
data*{ label: string; value: number; change?: number }[]—Array of bar data
showRankbooleantrueShow rank badges
showChangebooleantrueShow change indicators
barColorstring'indigo'Bar color theme
barHeightnumber32Bar height in pixels
formatValue(v: number) => string—Value formatter function
classNamestring—Additional CSS classes

Usage

Import and implementation examples

// Horizontal bar chart with ranks and changes
const projects = [
  { label: 'Marketing', value: 4200, change: 12 },
  { label: 'Sales', value: 3100, change: -3 },
  { label: 'Product', value: 2800, change: 8 },
]

const maxValue = Math.max(...projects.map(p => p.value))

<div className="space-y-4">
  {projects.map((project, i) => (
    <div key={i} className="flex items-center gap-4">
      {/* Rank badge */}
      <div className="w-8 h-8 flex items-center justify-center rounded-lg bg-slate-100">
        {i + 1}
      </div>

      {/* Label */}
      <div className="w-32 text-sm font-medium">{project.label}</div>

      {/* Bar */}
      <div className="flex-1 h-8 bg-slate-100 rounded-lg overflow-hidden">
        <div
          className="h-full bg-indigo-500 rounded-lg"
          style={{ width: `${(project.value / maxValue) * 100}%` }}
        />
      </div>

      {/* Value */}
      <div className="w-20 text-right font-semibold">
        {project.value.toLocaleString()}
      </div>

      {/* Change */}
      <div className={project.change > 0 ? 'text-teal-600' : 'text-rose-600'}>
        {project.change > 0 ? '↑' : '↓'} {Math.abs(project.change)}%
      </div>
    </div>
  ))}
</div>

Features

Built-in functionality

  • Rank indicators: Special styling for top 3 positions
  • Change arrows: Up/down indicators with color coding
  • Gradient bars: Smooth color gradients on bars
  • Hover states: Interactive opacity on hover
  • Responsive: Adapts to container width
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses role="img" for chart containeraria-label describes chart contentValues included as text labels

Keyboard Navigation

KeyAction
N/AChart is not interactive by default

Notes

  • Rank and value are visible as text
  • Change direction communicated with arrows and color
  • Consider data table for complex datasets

Related Components

Bar ChartProgressStatistic