Bar Chart

CSS-only bar chart component with vertical and horizontal orientations, stacked bars, compact mode, grid lines, color variants, and glass styling. No JavaScript required for rendering.

Basic Vertical

Preview

Mon

Tue

Wed

Thu

Fri

Sat

Sun

<div class="bar-chart">
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">45</span>
    </div>
    <div class="bar-chart-bar" style="height: 45%"></div>
    <span class="bar-chart-label">Mon</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">72</span>
    </div>
    <div class="bar-chart-bar" style="height: 72%"></div>
    <span class="bar-chart-label">Tue</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">58</span>
    </div>
    <div class="bar-chart-bar" style="height: 58%"></div>
    <span class="bar-chart-label">Wed</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">90</span>
    </div>
    <div class="bar-chart-bar" style="height: 90%"></div>
    <span class="bar-chart-label">Thu</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">35</span>
    </div>
    <div class="bar-chart-bar" style="height: 35%"></div>
    <span class="bar-chart-label">Fri</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">65</span>
    </div>
    <div class="bar-chart-bar" style="height: 65%"></div>
    <span class="bar-chart-label">Sat</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">80</span>
    </div>
    <div class="bar-chart-bar" style="height: 80%"></div>
    <span class="bar-chart-label">Sun</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex items-end gap-4 h-60 p-4">
  <div class="flex-1 flex flex-col items-center justify-end h-full gap-3">
    <span class="text-sm font-bold text-primary">45</span>
    <div class="w-full rounded-t-md bg-gradient-to-t from-primary to-primary/70" style="height: 45%"></div>
    <span class="text-sm font-semibold">Mon</span>
  </div>
  <div class="flex-1 flex flex-col items-center justify-end h-full gap-3">
    <span class="text-sm font-bold text-primary">72</span>
    <div class="w-full rounded-t-md bg-gradient-to-t from-primary to-primary/70" style="height: 72%"></div>
    <span class="text-sm font-semibold">Tue</span>
  </div>
  <!-- ... more bars ... -->
</div>

Requires: tw.min.css

// No JavaScript required for styling
// Set bar heights via inline style: style="height: 60%"

With Sub-values

Preview

$1.2k +12%

$1.8k +28%

$950 -8%

$2.1k +35%

<div class="bar-chart">
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">$1.2k</span>
      <span class="bar-chart-value-sub">+12%</span>
    </div>
    <div class="bar-chart-bar" style="height: 60%"></div>
    <span class="bar-chart-label">Q1</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">$1.8k</span>
      <span class="bar-chart-value-sub">+28%</span>
    </div>
    <div class="bar-chart-bar" style="height: 85%"></div>
    <span class="bar-chart-label">Q2</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">$950</span>
      <span class="bar-chart-value-sub">-8%</span>
    </div>
    <div class="bar-chart-bar" style="height: 45%"></div>
    <span class="bar-chart-label">Q3</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">$2.1k</span>
      <span class="bar-chart-value-sub">+35%</span>
    </div>
    <div class="bar-chart-bar" style="height: 95%"></div>
    <span class="bar-chart-label">Q4</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex items-end gap-4 h-60 p-4">
  <div class="flex-1 flex flex-col items-center justify-end h-full gap-3">
    <div class="text-center">
      <span class="text-sm font-bold text-primary block">$1.2k</span>
      <span class="text-xs text-base-content/40">+12%</span>
    </div>
    <div class="w-full rounded-t-md bg-gradient-to-t from-primary to-primary/70" style="height: 60%"></div>
    <span class="text-sm font-semibold">Q1</span>
  </div>
  <!-- ... more bars ... -->
</div>

Requires: tw.min.css

// No JavaScript required

Horizontal

Preview

Chrome

65%

Safari

18%

Firefox

Edge

Other

<div class="bar-chart bar-chart-horizontal">
  <div class="bar-chart-item">
    <span class="bar-chart-label">Chrome</span>
    <div class="bar-chart-bar" style="width: 65%"></div>
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">65%</span>
    </div>
  </div>
  <div class="bar-chart-item">
    <span class="bar-chart-label">Safari</span>
    <div class="bar-chart-bar" style="width: 18%"></div>
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">18%</span>
    </div>
  </div>
  <div class="bar-chart-item">
    <span class="bar-chart-label">Firefox</span>
    <div class="bar-chart-bar" style="width: 8%"></div>
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">8%</span>
    </div>
  </div>
  <div class="bar-chart-item">
    <span class="bar-chart-label">Edge</span>
    <div class="bar-chart-bar" style="width: 5%"></div>
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">5%</span>
    </div>
  </div>
  <div class="bar-chart-item">
    <span class="bar-chart-label">Other</span>
    <div class="bar-chart-bar" style="width: 4%"></div>
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">4%</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4 p-4">
  <div class="flex items-center gap-4">
    <span class="text-sm font-semibold w-20 shrink-0">Chrome</span>
    <div class="h-6 rounded-r-md bg-gradient-to-r from-primary to-primary/70" style="width: 65%"></div>
    <span class="text-sm font-bold text-primary w-20 text-right shrink-0">65%</span>
  </div>
  <div class="flex items-center gap-4">
    <span class="text-sm font-semibold w-20 shrink-0">Safari</span>
    <div class="h-6 rounded-r-md bg-gradient-to-r from-primary to-primary/70" style="width: 18%"></div>
    <span class="text-sm font-bold text-primary w-20 text-right shrink-0">18%</span>
  </div>
  <!-- ... more bars ... -->
</div>

Requires: tw.min.css

// No JavaScript required
// For horizontal bars, set width instead of height: style="width: 65%"

Color Variants

Preview

<div class="flex flex-col gap-6">
  <!-- Primary (default) -->
  <div class="bar-chart bar-chart-sm">
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 60%"></div>
      <span class="bar-chart-label">A</span>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 80%"></div>
      <span class="bar-chart-label">B</span>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 45%"></div>
      <span class="bar-chart-label">C</span>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 90%"></div>
      <span class="bar-chart-label">D</span>
    </div>
  </div>

  <!-- Success -->
  <div class="bar-chart bar-chart-sm bar-chart-success">
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 70%"></div>
      <span class="bar-chart-label">A</span>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 55%"></div>
      <span class="bar-chart-label">B</span>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 85%"></div>
      <span class="bar-chart-label">C</span>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 40%"></div>
      <span class="bar-chart-label">D</span>
    </div>
  </div>

  <!-- Warning -->
  <div class="bar-chart bar-chart-sm bar-chart-warning">
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 50%"></div>
      <span class="bar-chart-label">A</span>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 75%"></div>
      <span class="bar-chart-label">B</span>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 60%"></div>
      <span class="bar-chart-label">C</span>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 90%"></div>
      <span class="bar-chart-label">D</span>
    </div>
  </div>

  <!-- Error -->
  <div class="bar-chart bar-chart-sm bar-chart-error">
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 85%"></div>
      <span class="bar-chart-label">A</span>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 40%"></div>
      <span class="bar-chart-label">B</span>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 65%"></div>
      <span class="bar-chart-label">C</span>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 50%"></div>
      <span class="bar-chart-label">D</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Use CSS custom property --bar-color on the container or per-bar -->
<div class="flex items-end gap-2 h-40 p-4" style="--bar-color: var(--color-success)">
  <div class="flex-1 flex flex-col items-center justify-end h-full gap-2">
    <div class="w-full rounded-t bg-gradient-to-t from-[var(--bar-color)] to-[color-mix(in_oklch,var(--bar-color)_70%,white)]" style="height: 70%"></div>
    <span class="text-sm font-semibold">A</span>
  </div>
  <!-- ... more bars ... -->
</div>

Requires: tw.min.css

// No JavaScript required
// Per-bar colors via inline style:
// <div class="bar-chart-bar" style="--bar-color: var(--color-success); height: 60%"></div>

Per-bar Colors

Preview

Sales

Costs

Sales

Costs

<div class="bar-chart">
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">Sales</span>
    </div>
    <div class="bar-chart-bar" style="--bar-color: var(--color-primary); height: 75%"></div>
    <span class="bar-chart-label">Q1</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">Costs</span>
    </div>
    <div class="bar-chart-bar" style="--bar-color: var(--color-error); height: 45%"></div>
    <span class="bar-chart-label">Q1</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">Sales</span>
    </div>
    <div class="bar-chart-bar" style="--bar-color: var(--color-success); height: 85%"></div>
    <span class="bar-chart-label">Q2</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">Costs</span>
    </div>
    <div class="bar-chart-bar" style="--bar-color: var(--color-warning); height: 55%"></div>
    <span class="bar-chart-label">Q2</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex items-end gap-4 h-60 p-4">
  <div class="flex-1 flex flex-col items-center justify-end h-full gap-3">
    <span class="text-sm font-bold text-primary">Sales</span>
    <div class="w-full rounded-t-md bg-gradient-to-t from-primary to-primary/70" style="height: 75%"></div>
    <span class="text-sm font-semibold">Q1</span>
  </div>
  <div class="flex-1 flex flex-col items-center justify-end h-full gap-3">
    <span class="text-sm font-bold text-error">Costs</span>
    <div class="w-full rounded-t-md bg-gradient-to-t from-error to-error/70" style="height: 45%"></div>
    <span class="text-sm font-semibold">Q1</span>
  </div>
  <!-- ... more bars ... -->
</div>

Requires: tw.min.css

// Per-bar color via CSS custom property:
// style="--bar-color: var(--color-success); height: 60%"

Size Variants

Preview

bar-chart-sm (160px)

bar-chart (default, 240px)

bar-chart-lg (320px)

<div class="flex flex-col gap-6">
  <!-- Small -->
  <div>
    <p class="text-sm font-medium mb-2 text-base-content/60">bar-chart-sm (160px)</p>
    <div class="bar-chart bar-chart-sm">
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 50%"></div>
        <span class="bar-chart-label">A</span>
      </div>
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 80%"></div>
        <span class="bar-chart-label">B</span>
      </div>
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 35%"></div>
        <span class="bar-chart-label">C</span>
      </div>
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 65%"></div>
        <span class="bar-chart-label">D</span>
      </div>
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 90%"></div>
        <span class="bar-chart-label">E</span>
      </div>
    </div>
  </div>

  <!-- Default -->
  <div>
    <p class="text-sm font-medium mb-2 text-base-content/60">bar-chart (default, 240px)</p>
    <div class="bar-chart">
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 50%"></div>
        <span class="bar-chart-label">A</span>
      </div>
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 80%"></div>
        <span class="bar-chart-label">B</span>
      </div>
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 35%"></div>
        <span class="bar-chart-label">C</span>
      </div>
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 65%"></div>
        <span class="bar-chart-label">D</span>
      </div>
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 90%"></div>
        <span class="bar-chart-label">E</span>
      </div>
    </div>
  </div>

  <!-- Large -->
  <div>
    <p class="text-sm font-medium mb-2 text-base-content/60">bar-chart-lg (320px)</p>
    <div class="bar-chart bar-chart-lg">
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 50%"></div>
        <span class="bar-chart-label">A</span>
      </div>
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 80%"></div>
        <span class="bar-chart-label">B</span>
      </div>
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 35%"></div>
        <span class="bar-chart-label">C</span>
      </div>
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 65%"></div>
        <span class="bar-chart-label">D</span>
      </div>
      <div class="bar-chart-item">
        <div class="bar-chart-bar" style="height: 90%"></div>
        <span class="bar-chart-label">E</span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Adjust container height for sizing -->
<div class="flex items-end gap-2 h-40 p-4"><!-- sm: h-40 -->
  <div class="flex-1 flex flex-col items-center justify-end h-full gap-2">
    <div class="w-full rounded-t bg-gradient-to-t from-primary to-primary/70" style="height: 50%"></div>
    <span class="text-sm font-semibold">A</span>
  </div>
  <!-- ... more bars ... -->
</div>
<!-- Default: h-60, Large: h-80 -->

Requires: tw.min.css

// No JavaScript required

Compact (Mini Bar Chart)

Preview

Weekly trend

<div class="flex items-center gap-4">
  <div class="bar-chart bar-chart-compact" style="width: 120px">
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 40%"></div>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 70%"></div>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 55%"></div>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 90%"></div>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 30%"></div>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 65%"></div>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 80%"></div>
    </div>
    <div class="bar-chart-item">
      <div class="bar-chart-bar" style="height: 50%"></div>
    </div>
  </div>
  <span class="text-sm font-semibold">Weekly trend</span>
</div>

Requires: ux.min.css

<div class="flex items-center gap-4">
  <div class="flex items-end gap-0.5 h-15" style="width: 120px">
    <div class="flex-1 rounded-sm bg-primary/80" style="height: 40%"></div>
    <div class="flex-1 rounded-sm bg-primary/80" style="height: 70%"></div>
    <div class="flex-1 rounded-sm bg-primary/80" style="height: 55%"></div>
    <div class="flex-1 rounded-sm bg-primary/80" style="height: 90%"></div>
    <div class="flex-1 rounded-sm bg-primary/80" style="height: 30%"></div>
    <div class="flex-1 rounded-sm bg-primary/80" style="height: 65%"></div>
    <div class="flex-1 rounded-sm bg-primary/80" style="height: 80%"></div>
    <div class="flex-1 rounded-sm bg-primary/80" style="height: 50%"></div>
  </div>
  <span class="text-sm font-semibold">Weekly trend</span>
</div>

Requires: tw.min.css

// Compact hides labels and value text, showing only bars
// Great for inline/sparkline-style usage

Grid Lines

Preview

120

Jan

185

Feb

150

Mar

220

Apr

175

May

240

Jun

<div class="bar-chart bar-chart-grid">
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">120</span>
    </div>
    <div class="bar-chart-bar" style="height: 48%"></div>
    <span class="bar-chart-label">Jan</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">185</span>
    </div>
    <div class="bar-chart-bar" style="height: 74%"></div>
    <span class="bar-chart-label">Feb</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">150</span>
    </div>
    <div class="bar-chart-bar" style="height: 60%"></div>
    <span class="bar-chart-label">Mar</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">220</span>
    </div>
    <div class="bar-chart-bar" style="height: 88%"></div>
    <span class="bar-chart-label">Apr</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">175</span>
    </div>
    <div class="bar-chart-bar" style="height: 70%"></div>
    <span class="bar-chart-label">May</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">240</span>
    </div>
    <div class="bar-chart-bar" style="height: 96%"></div>
    <span class="bar-chart-label">Jun</span>
  </div>
</div>

Requires: ux.min.css

<!-- Grid lines via background-image gradient -->
<div class="flex items-end gap-4 h-60 p-4 relative" style="background-image: linear-gradient(to top, transparent 0%, transparent 24%, var(--color-base-300) 24%, var(--color-base-300) 25%, transparent 25%, transparent 49%, var(--color-base-300) 49%, var(--color-base-300) 50%, transparent 50%, transparent 74%, var(--color-base-300) 74%, var(--color-base-300) 75%, transparent 75%)">
  <div class="flex-1 flex flex-col items-center justify-end h-full gap-3">
    <span class="text-sm font-bold text-primary">120</span>
    <div class="w-full rounded-t-md bg-gradient-to-t from-primary to-primary/70" style="height: 48%"></div>
    <span class="text-sm font-semibold">Jan</span>
  </div>
  <!-- ... more bars ... -->
</div>

Requires: tw.min.css

// No JavaScript required
// Grid lines are rendered at 25%, 50%, and 75% via CSS background-image

Glass Variant

Preview

$4.2k

Jan

$5.8k

Feb

$3.9k

Mar

$7.1k

Apr

$6.3k

May

<div class="bar-chart glass bar-chart-success">
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">$4.2k</span>
    </div>
    <div class="bar-chart-bar" style="height: 55%"></div>
    <span class="bar-chart-label">Jan</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">$5.8k</span>
    </div>
    <div class="bar-chart-bar" style="height: 75%"></div>
    <span class="bar-chart-label">Feb</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">$3.9k</span>
    </div>
    <div class="bar-chart-bar" style="height: 50%"></div>
    <span class="bar-chart-label">Mar</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">$7.1k</span>
    </div>
    <div class="bar-chart-bar" style="height: 92%"></div>
    <span class="bar-chart-label">Apr</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">$6.3k</span>
    </div>
    <div class="bar-chart-bar" style="height: 82%"></div>
    <span class="bar-chart-label">May</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex items-end gap-4 h-60 p-4 backdrop-blur-md bg-white/10 rounded-2xl border border-white/20">
  <div class="flex-1 flex flex-col items-center justify-end h-full gap-3">
    <span class="text-sm font-bold text-success">$4.2k</span>
    <div class="w-full rounded-t-md bg-gradient-to-t from-success to-success/70" style="height: 55%"></div>
    <span class="text-sm font-semibold">Jan</span>
  </div>
  <!-- ... more bars ... -->
</div>

Requires: tw.min.css

// No JavaScript required
// Combine glass with any color variant

Stacked Bars

Preview

$3.2k

$4.5k

$2.8k

$5.1k

<div class="bar-chart">
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">$3.2k</span>
    </div>
    <div class="bar-chart-bar bar-chart-bar-stacked" style="height: 70%">
      <div class="bar-chart-bar-segment" style="height: 40%; background: var(--color-primary)"></div>
      <div class="bar-chart-bar-segment" style="height: 35%; background: var(--color-success)"></div>
      <div class="bar-chart-bar-segment" style="height: 25%; background: var(--color-warning)"></div>
    </div>
    <span class="bar-chart-label">Q1</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">$4.5k</span>
    </div>
    <div class="bar-chart-bar bar-chart-bar-stacked" style="height: 90%">
      <div class="bar-chart-bar-segment" style="height: 50%; background: var(--color-primary)"></div>
      <div class="bar-chart-bar-segment" style="height: 30%; background: var(--color-success)"></div>
      <div class="bar-chart-bar-segment" style="height: 20%; background: var(--color-warning)"></div>
    </div>
    <span class="bar-chart-label">Q2</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">$2.8k</span>
    </div>
    <div class="bar-chart-bar bar-chart-bar-stacked" style="height: 60%">
      <div class="bar-chart-bar-segment" style="height: 30%; background: var(--color-primary)"></div>
      <div class="bar-chart-bar-segment" style="height: 45%; background: var(--color-success)"></div>
      <div class="bar-chart-bar-segment" style="height: 25%; background: var(--color-warning)"></div>
    </div>
    <span class="bar-chart-label">Q3</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-value">
      <span class="bar-chart-value-main">$5.1k</span>
    </div>
    <div class="bar-chart-bar bar-chart-bar-stacked" style="height: 95%">
      <div class="bar-chart-bar-segment" style="height: 45%; background: var(--color-primary)"></div>
      <div class="bar-chart-bar-segment" style="height: 35%; background: var(--color-success)"></div>
      <div class="bar-chart-bar-segment" style="height: 20%; background: var(--color-warning)"></div>
    </div>
    <span class="bar-chart-label">Q4</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex items-end gap-4 h-60 p-4">
  <div class="flex-1 flex flex-col items-center justify-end h-full gap-3">
    <span class="text-sm font-bold">$3.2k</span>
    <div class="w-full flex flex-col-reverse bg-transparent" style="height: 70%">
      <div class="w-full bg-primary" style="height: 40%; border-radius: 0 0 6px 6px"></div>
      <div class="w-full bg-success" style="height: 35%"></div>
      <div class="w-full bg-warning" style="height: 25%; border-radius: 6px 6px 0 0"></div>
    </div>
    <span class="text-sm font-semibold">Q1</span>
  </div>
  <!-- ... more bars ... -->
</div>

Requires: tw.min.css

// Stacked bars use bar-chart-bar-stacked container with bar-chart-bar-segment children
// Each segment's height is relative to the stacked container

No Dot Indicator

Preview

Mon

Tue

Wed

Thu

Fri

<div class="bar-chart bar-chart-sm">
  <div class="bar-chart-item">
    <div class="bar-chart-bar bar-chart-bar-no-dot" style="height: 55%"></div>
    <span class="bar-chart-label">Mon</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-bar bar-chart-bar-no-dot" style="height: 80%"></div>
    <span class="bar-chart-label">Tue</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-bar bar-chart-bar-no-dot" style="height: 40%"></div>
    <span class="bar-chart-label">Wed</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-bar bar-chart-bar-no-dot" style="height: 95%"></div>
    <span class="bar-chart-label">Thu</span>
  </div>
  <div class="bar-chart-item">
    <div class="bar-chart-bar bar-chart-bar-no-dot" style="height: 65%"></div>
    <span class="bar-chart-label">Fri</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex items-end gap-2 h-40 p-4">
  <div class="flex-1 flex flex-col items-center justify-end h-full gap-2">
    <div class="w-full rounded-t-md bg-gradient-to-t from-primary to-primary/70" style="height: 55%"></div>
    <span class="text-sm font-semibold">Mon</span>
  </div>
  <!-- No dot indicator — just omit the ::before pseudo-element -->
  <!-- ... more bars ... -->
</div>

Requires: tw.min.css

// Add bar-chart-bar-no-dot to hide the circle indicator at bar top

Classes Reference

Class	Description
.bar-chart	Main container. Flex row, items aligned to bottom. Default height 240px.
.bar-chart-item	Individual bar column container (flex-1, full height)
.bar-chart-bar	The bar element. Set height via inline style (e.g. style="height: 60%")
.bar-chart-value	Value container displayed above the bar
.bar-chart-value-main	Primary value text (bold, colored)
.bar-chart-value-sub	Secondary value text (smaller, muted)
.bar-chart-label	Label displayed below the bar
.bar-chart-bar-no-dot	Hides the dot indicator at the top of the bar
.bar-chart-horizontal	Horizontal orientation. Bars grow left-to-right. Use width instead of height.
.bar-chart-bar-stacked	Stacked bar container (add to .bar-chart-bar). Contains segments.
.bar-chart-bar-segment	Individual segment inside a stacked bar
.bar-chart-primary	Primary color variant (default)
.bar-chart-success	Success (green) color variant
.bar-chart-warning	Warning (yellow/orange) color variant
.bar-chart-error	Error (red) color variant
.bar-chart-sm	Small size (160px height, tighter gap)
.bar-chart-lg	Large size (320px height, wider gap)
.bar-chart-compact	Mini sparkline-style (60px, no labels/values/dots, minimal gap)
.bar-chart-grid	Adds horizontal grid lines at 25%, 50%, 75%
.bar-chart.glass	Glassmorphism background with blur and border
--bar-color	CSS custom property for per-bar color (set via inline style)