Chart Bar

Data visualization bar components for charts, graphs, and analytics displays

Chart Bar

Flexible bar chart components for data visualization. Features glassmorphic styling, animated height transitions, and support for percentage displays with custom icons.

Usage

import { ChartBarContainer, ChartBar, PercentageBar } from "@/components/ui/chart-bar";

export default function Example() {
  return (
    <ChartBarContainer>
      <ChartBar value={40} maxValue={100} label="Desktop" />
      <ChartBar value={35} maxValue={100} label="Mobile" />
      <ChartBar value={25} maxValue={100} label="Tablet" />
    </ChartBarContainer>
  );
}

Components

ChartBarContainer

Container component that manages layout and spacing for multiple bars.

ChartBar

Individual bar with automatic height calculation, inner glow orb, and optional label.

PercentageBar

Specialized bar for percentage displays with icon support (Bento17 pattern).

Props

ChartBarContainer Props

Prop	Type	Default	Description
gap	"none" | "sm" | "default" | "lg"	"default"	Spacing between bars
orientation	"horizontal" | "vertical"	"horizontal"	Layout direction

ChartBar Props

Prop	Type	Default	Description
value	number	-	Current value
maxValue	number	100	Maximum value for height calculation
label	string	-	Label text below bar
showLabel	boolean	true	Display label
barColor	string	-	Custom bar fill color
variant	"default" | "highlighted"	"default"	Visual style

PercentageBar Props

Prop	Type	Default	Description
percentage	number	-	Percentage value (0-100)
icon	ReactNode	-	Icon or image to display in bar
size	"sm" | "default" | "lg"	"default"	Bar width

Variants

Gap Variants

// No gap
<ChartBarContainer gap="none">...</ChartBarContainer>

// Small gap - 4px
<ChartBarContainer gap="sm">...</ChartBarContainer>

// Default gap - 8px
<ChartBarContainer gap="default">...</ChartBarContainer>

// Large gap - 16px
<ChartBarContainer gap="lg">...</ChartBarContainer>

Orientation

// Horizontal layout (default)
<ChartBarContainer orientation="horizontal">
  <ChartBar value={40} />
  <ChartBar value={60} />
</ChartBarContainer>

// Vertical layout
<ChartBarContainer orientation="vertical">
  <ChartBar value={40} />
  <ChartBar value={60} />
</ChartBarContainer>

Examples

Basic Bar Chart

<ChartBarContainer>
  <ChartBar value={40} maxValue={100} label="Q1" />
  <ChartBar value={65} maxValue={100} label="Q2" />
  <ChartBar value={55} maxValue={100} label="Q3" />
  <ChartBar value={80} maxValue={100} label="Q4" />
</ChartBarContainer>

With Custom Colors

<ChartBarContainer>
  <ChartBar value={40} label="Sales" barColor="#4ade80" />
  <ChartBar value={60} label="Revenue" barColor="#60a5fa" />
  <ChartBar value={30} label="Profit" barColor="#fbbf24" />
</ChartBarContainer>

Percentage Bars (Bento17 Pattern)

import Image from "next/image";

<ChartBarContainer className="h-[200px]">
  <PercentageBar 
    percentage={40}
    icon={<Image src="/balls-1.svg" alt="" fill />}
  />
  <PercentageBar 
    percentage={15}
    icon={<Image src="/balls-2.svg" alt="" fill />}
  />
  <PercentageBar 
    percentage={68}
    icon={<Image src="/balls-3.svg" alt="" fill />}
  />
  <PercentageBar 
    percentage={24}
    icon={<Image src="/balls-4.svg" alt="" fill />}
  />
</ChartBarContainer>

Without Labels

<ChartBarContainer>
  <ChartBar value={40} showLabel={false} />
  <ChartBar value={60} showLabel={false} />
  <ChartBar value={80} showLabel={false} />
</ChartBarContainer>

Compact Layout

<ChartBarContainer gap="sm" className="h-32">
  <ChartBar value={20} label="Mon" />
  <ChartBar value={40} label="Tue" />
  <ChartBar value={30} label="Wed" />
  <ChartBar value={60} label="Thu" />
  <ChartBar value={50} label="Fri" />
  <ChartBar value={70} label="Sat" />
  <ChartBar value={45} label="Sun" />
</ChartBarContainer>

With Custom Heights

<ChartBarContainer className="h-[300px]">
  <ChartBar value={40} maxValue={100} />
  <ChartBar value={80} maxValue={100} />
  <ChartBar value={60} maxValue={100} />
</ChartBarContainer>

Design Tokens

Dimensions

Element	Value	Token
Border radius	12px	var(--radius-sm)
Border width	1.5px	var(--border-width-default)
Orb size	16px	-
Min height	20px	-

Effects

Token	Value	Description
Background	var(--neutral-2-5)	Bar background
Border	var(--ui-stroke-subtle)	Bar border
Orb gradient	var(--gradient-orb)	Inner glow effect
Orb shadow	0px 24px 24px 0px rgba(0,0,0,0.3)	Orb elevation

Colors

Element	Token
Label text	var(--ui-text-secondary)
Bar fill	Custom or var(--neutral-2-5)

Height Calculation

Bar height is automatically calculated based on value and maxValue:

height = (value / maxValue) × 100%

Example:

• Value: 40
• Max: 100
• Height: 40%

The height animates smoothly with a 500ms transition when the value changes.

Inner Glow Orb

Each bar includes a decorative orb at its center:

• 16px diameter
• Circular with gradient fill
• 10% opacity
• Positioned at center of bar
• Uses var(--gradient-orb) token

Found In

• Bento17 - Engagement rate percentages with icon bars
• Bento23 - Analytics chart with multiple bars
• Bento24 - Performance metrics
• Bento26 - Dashboard statistics

Accessibility

ChartBar

• Semantic structure with labels
• Color is not the only indicator (labels + height)
• Smooth animations respect prefers-reduced-motion
• Labels are readable by screen readers

Best Practices

// Provide context for data
<div role="img" aria-label="Quarterly sales data">
  <ChartBarContainer>
    <ChartBar value={40} label="Q1" />
    <ChartBar value={65} label="Q2" />
    <ChartBar value={55} label="Q3" />
    <ChartBar value={80} label="Q4" />
  </ChartBarContainer>
</div>

// Include data table for screen readers
<div>
  <ChartBarContainer aria-hidden="true">
    {/* Visual chart */}
  </ChartBarContainer>
  <table className="sr-only">
    <caption>Sales data by quarter</caption>
    {/* Data table */}
  </table>
</div>

Performance

• CSS-based height transitions (hardware accelerated)
• Minimal re-renders (only on value change)
• No external chart libraries required
• Lightweight DOM structure
• Smooth 500ms transitions

Responsive Behavior

Bars automatically adjust to container height. For responsive charts:

<div className="h-32 md:h-48 lg:h-64">
  <ChartBarContainer className="h-full">
    <ChartBar value={40} />
    <ChartBar value={60} />
  </ChartBarContainer>
</div>