Product block

CSS Bar Chart Panel

Categorical bars in plain CSS with gridlines, hover values and a screen-reader table carrying the real numbers.

139 linesNo dependenciesAdded 8 Aug 2026Updated 2 Sept 2026

bar chart
chart
css
analytics
accessible

What's included

components/bar-chart-panel.tsx
No runtime dependencies

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add bar-chart-panel

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Revenue this week

Solid is this week. Faded is the week before.

$34,500

Revenue this week
Period	This week	Previous week
Mon	$4,200	$3,800
Tue	$5,100	$4,400
Wed	$4,800	$4,900
Thu	$6,300	$5,200
Fri	$7,100	$5,800
Sat	$3,900	$3,600
Sun	$3,100	$3,000

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/bar-chart-panel.tsx

/**
 * <BarChartPanel> — a categorical bar chart in CSS grid, no SVG.
 *
 * Bars are grid rows sized as a percentage of the maximum, which means the
 * chart reflows with its container for free and every bar is a real DOM
 * element that can carry a tooltip, a link or a focus ring.
 *
 * The accessible fallback is a real <table> in `sr-only`, not `aria-label`
 * text on the chart. A chart described as "bar chart showing revenue" tells
 * a screen-reader user nothing; the table gives them the actual numbers.
 *
 * Gridlines sit behind the bars at fixed fractions, so the eye can read a
 * value off the chart without every bar needing its own printed figure.
 *
 * Server component.
 */

import * as React from 'react'

export interface Bar {
  label: string
  value: number
  /** Optional second series, drawn as a lighter bar behind. */
  compare?: number
}

export interface BarChartPanelProps {
  bars?: Bar[]
  heading?: string
  caption?: string
  /** Formats values in the tooltip, the table and the axis. */
  format?: (value: number) => string
  className?: string
}

const DEFAULT_BARS: Bar[] = [
  { label: 'Mon', value: 4200, compare: 3800 },
  { label: 'Tue', value: 5100, compare: 4400 },
  { label: 'Wed', value: 4800, compare: 4900 },
  { label: 'Thu', value: 6300, compare: 5200 },
  { label: 'Fri', value: 7100, compare: 5800 },
  { label: 'Sat', value: 3900, compare: 3600 },
  { label: 'Sun', value: 3100, compare: 3000 },
]

const currency = (value: number) => `$${value.toLocaleString('en-US')}`

export function BarChartPanel({
  bars = DEFAULT_BARS,
  heading = 'Revenue this week',
  caption = 'Solid is this week. Faded is the week before.',
  format = currency,
  className = '',
}: BarChartPanelProps) {
  const max = Math.max(...bars.map((b) => Math.max(b.value, b.compare ?? 0)), 1)
  const total = bars.reduce((sum, b) => sum + b.value, 0)

  return (
    <section
      className={`rounded-2xl border border-border/60 bg-card/80 p-6 backdrop-blur ${className}`}
    >
      <div className="flex flex-wrap items-baseline justify-between gap-3">
        <div>
          <h2 className="font-semibold tracking-tight">{heading}</h2>
          {caption ? (
            <p className="mt-0.5 text-sm text-muted-foreground">{caption}</p>
          ) : null}
        </div>
        <span className="text-2xl font-extrabold tracking-tight">{format(total)}</span>
      </div>

      <div className="relative mt-8">
        {/* Gridlines behind the bars. */}
        <div aria-hidden className="absolute inset-0 flex flex-col justify-between">
          {[1, 0.75, 0.5, 0.25, 0].map((fraction) => (
            <div key={fraction} className="flex items-center gap-2">
              <span className="min-w-12 shrink-0 text-end text-[0.65rem] text-muted-foreground">
                {format(Math.round(max * fraction))}
              </span>
              <span className="h-px flex-1 bg-border/50" />
            </div>
          ))}
        </div>

        {/* Bars, offset past the axis labels. */}
        <div aria-hidden className="relative ms-14 flex h-48 items-end gap-2">
          {bars.map((bar) => (
            <div key={bar.label} className="group flex h-full min-w-0 flex-1 flex-col justify-end gap-1">
              <div className="relative flex h-full items-end justify-center gap-0.5">
                {typeof bar.compare === 'number' ? (
                  <span
                    className="w-1/3 rounded-t bg-muted-foreground/20 transition-all border border-transparent"
                    style={{ height: `${(bar.compare / max) * 100}%` }}
                  />
                ) : null}

                <span
                  className="w-1/2 rounded-t bg-primary transition-all group-hover:bg-primary/80 border border-transparent"
                  style={{ height: `${(bar.value / max) * 100}%` }}
                />

                {/* Value on hover — keeps the chart clean at rest. */}
                <span className="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-1.5 py-0.5 text-[0.65rem] font-medium text-background opacity-0 transition-opacity group-hover:opacity-100">
                  {format(bar.value)}
                </span>
              </div>

              <span className="truncate text-center text-xs text-muted-foreground">{bar.label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* The real accessible representation. */}
      <table className="sr-only">
        <caption>{heading}</caption>
        <thead>
          <tr>
            <th scope="col">Period</th>
            <th scope="col">This week</th>
            {bars.some((b) => typeof b.compare === 'number') ? (
              <th scope="col">Previous week</th>
            ) : null}
          </tr>
        </thead>
        <tbody>
          {bars.map((bar) => (
            <tr key={bar.label}>
              <th scope="row">{bar.label}</th>
              <td>{format(bar.value)}</td>
              {typeof bar.compare === 'number' ? <td>{format(bar.compare)}</td> : null}
            </tr>
          ))}
        </tbody>
      </table>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Nothing to install. No component library, no icon package.
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/bar-chart-panel.tsx and import it where you need the section:

import { BarChartPanel } from '@/components/bar-chart-panel'

Customize

2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`bars`	`Bar[]`	`DEFAULT_BARS`
`heading`	`string`	`'Revenue this week'`
`caption`	`string`	`'Solid is this week. Faded is the week before.'`
`format`Formats values in the tooltip, the table and the axis.	`(value: number) => string`	`currency`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

bar-chart-panel.html

<!--
  CSS Bar Chart Panel — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section class="rounded-2xl border border-border/60 bg-card/80 p-6 backdrop-blur ">
  <div class="flex flex-wrap items-baseline justify-between gap-3">
    <div>
      <h2 class="font-semibold tracking-tight">Revenue this week</h2>
      <p class="mt-0.5 text-sm text-muted-foreground">Solid is this week. Faded is the week before.</p>
    </div>
    <span class="text-2xl font-extrabold tracking-tight">$34,500</span>
  </div>
  <div class="relative mt-8">
    <div aria-hidden="true" class="absolute inset-0 flex flex-col justify-between">
      <div class="flex items-center gap-2">
        <span class="min-w-12 shrink-0 text-end text-[0.65rem] text-muted-foreground">$7,100</span>
        <span class="h-px flex-1 bg-border/50"></span>
      </div>
      <div class="flex items-center gap-2">
        <span class="min-w-12 shrink-0 text-end text-[0.65rem] text-muted-foreground">$5,325</span>
        <span class="h-px flex-1 bg-border/50"></span>
      </div>
      <div class="flex items-center gap-2">
        <span class="min-w-12 shrink-0 text-end text-[0.65rem] text-muted-foreground">$3,550</span>
        <span class="h-px flex-1 bg-border/50"></span>
      </div>
      <div class="flex items-center gap-2">
        <span class="min-w-12 shrink-0 text-end text-[0.65rem] text-muted-foreground">$1,775</span>
        <span class="h-px flex-1 bg-border/50"></span>
      </div>
      <div class="flex items-center gap-2">
        <span class="min-w-12 shrink-0 text-end text-[0.65rem] text-muted-foreground">$0</span>
        <span class="h-px flex-1 bg-border/50"></span>
      </div>
    </div>
    <div aria-hidden="true" class="relative ms-14 flex h-48 items-end gap-2">
      <div class="group flex h-full min-w-0 flex-1 flex-col justify-end gap-1">
        <div class="relative flex h-full items-end justify-center gap-0.5">
          <span class="w-1/3 rounded-t bg-muted-foreground/20 transition-all border border-transparent" style="height:53.52112676056338%"></span>
          <span class="w-1/2 rounded-t bg-primary transition-all group-hover:bg-primary/80 border border-transparent" style="height:59.154929577464785%"></span>
          <span class="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-1.5 py-0.5 text-[0.65rem] font-medium text-background opacity-0 transition-opacity group-hover:opacity-100">$4,200</span>
        </div>
        <span class="truncate text-center text-xs text-muted-foreground">Mon</span>
      </div>
      <div class="group flex h-full min-w-0 flex-1 flex-col justify-end gap-1">
        <div class="relative flex h-full items-end justify-center gap-0.5">
          <span class="w-1/3 rounded-t bg-muted-foreground/20 transition-all border border-transparent" style="height:61.97183098591549%"></span>
          <span class="w-1/2 rounded-t bg-primary transition-all group-hover:bg-primary/80 border border-transparent" style="height:71.83098591549296%"></span>
          <span class="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-1.5 py-0.5 text-[0.65rem] font-medium text-background opacity-0 transition-opacity group-hover:opacity-100">$5,100</span>
        </div>
        <span class="truncate text-center text-xs text-muted-foreground">Tue</span>
      </div>
      <div class="group flex h-full min-w-0 flex-1 flex-col justify-end gap-1">
        <div class="relative flex h-full items-end justify-center gap-0.5">
          <span class="w-1/3 rounded-t bg-muted-foreground/20 transition-all border border-transparent" style="height:69.01408450704226%"></span>
          <span class="w-1/2 rounded-t bg-primary transition-all group-hover:bg-primary/80 border border-transparent" style="height:67.6056338028169%"></span>
          <span class="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-1.5 py-0.5 text-[0.65rem] font-medium text-background opacity-0 transition-opacity group-hover:opacity-100">$4,800</span>
        </div>
        <span class="truncate text-center text-xs text-muted-foreground">Wed</span>
      </div>
      <div class="group flex h-full min-w-0 flex-1 flex-col justify-end gap-1">
        <div class="relative flex h-full items-end justify-center gap-0.5">
          <span class="w-1/3 rounded-t bg-muted-foreground/20 transition-all border border-transparent" style="height:73.23943661971832%"></span>
          <span class="w-1/2 rounded-t bg-primary transition-all group-hover:bg-primary/80 border border-transparent" style="height:88.73239436619718%"></span>
          <span class="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-1.5 py-0.5 text-[0.65rem] font-medium text-background opacity-0 transition-opacity group-hover:opacity-100">$6,300</span>
        </div>
        <span class="truncate text-center text-xs text-muted-foreground">Thu</span>
      </div>
      <div class="group flex h-full min-w-0 flex-1 flex-col justify-end gap-1">
        <div class="relative flex h-full items-end justify-center gap-0.5">
          <span class="w-1/3 rounded-t bg-muted-foreground/20 transition-all border border-transparent" style="height:81.69014084507043%"></span>
          <span class="w-1/2 rounded-t bg-primary transition-all group-hover:bg-primary/80 border border-transparent" style="height:100%"></span>
          <span class="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-1.5 py-0.5 text-[0.65rem] font-medium text-background opacity-0 transition-opacity group-hover:opacity-100">$7,100</span>
        </div>
        <span class="truncate text-center text-xs text-muted-foreground">Fri</span>
      </div>
      <div class="group flex h-full min-w-0 flex-1 flex-col justify-end gap-1">
        <div class="relative flex h-full items-end justify-center gap-0.5">
          <span class="w-1/3 rounded-t bg-muted-foreground/20 transition-all border border-transparent" style="height:50.70422535211267%"></span>
          <span class="w-1/2 rounded-t bg-primary transition-all group-hover:bg-primary/80 border border-transparent" style="height:54.929577464788736%"></span>
          <span class="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-1.5 py-0.5 text-[0.65rem] font-medium text-background opacity-0 transition-opacity group-hover:opacity-100">$3,900</span>
        </div>
        <span class="truncate text-center text-xs text-muted-foreground">Sat</span>
      </div>
      <div class="group flex h-full min-w-0 flex-1 flex-col justify-end gap-1">
        <div class="relative flex h-full items-end justify-center gap-0.5">
          <span class="w-1/3 rounded-t bg-muted-foreground/20 transition-all border border-transparent" style="height:42.25352112676056%"></span>
          <span class="w-1/2 rounded-t bg-primary transition-all group-hover:bg-primary/80 border border-transparent" style="height:43.66197183098591%"></span>
          <span class="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-1.5 py-0.5 text-[0.65rem] font-medium text-background opacity-0 transition-opacity group-hover:opacity-100">$3,100</span>
        </div>
        <span class="truncate text-center text-xs text-muted-foreground">Sun</span>
      </div>
    </div>
  </div>
  <table class="sr-only">
    <caption>Revenue this week</caption>
    <thead>
      <tr>
        <th scope="col">Period</th>
        <th scope="col">This week</th>
        <th scope="col">Previous week</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Mon</th>
        <td>$4,200</td>
        <td>$3,800</td>
      </tr>
      <tr>
        <th scope="row">Tue</th>
        <td>$5,100</td>
        <td>$4,400</td>
      </tr>
      <tr>
        <th scope="row">Wed</th>
        <td>$4,800</td>
        <td>$4,900</td>
      </tr>
      <tr>
        <th scope="row">Thu</th>
        <td>$6,300</td>
        <td>$5,200</td>
      </tr>
      <tr>
        <th scope="row">Fri</th>
        <td>$7,100</td>
        <td>$5,800</td>
      </tr>
      <tr>
        <th scope="row">Sat</th>
        <td>$3,900</td>
        <td>$3,600</td>
      </tr>
      <tr>
        <th scope="row">Sun</th>
        <td>$3,100</td>
        <td>$3,000</td>
      </tr>
    </tbody>
  </table>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Dashboard Overview5 blocks

Want the whole screen instead of this one section? Open a page and copy it entire.

9 more blocks in Charts & Metrics

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Charts & Metrics

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Charts & Metrics blocks

View category

Sparkline Metric Cards

KPI cards with a hand-built SVG trend line — no charting dependency for a path this file computes in twelve lines.

Charts & Metrics142 linesNo deps

Quota & Usage Meters

Consumption against plan limits, with warning thresholds, honest overage display and unmetered quotas that do not fake a bar.

Charts & Metrics172 lines1 dep2 Sept

Monthly active workspaces

Compared with the same month last year.

This year
Last year

5,000
3,500
2,000

Monthly active workspaces
Month	This year	Last year
Jan	3,120	2,980
Feb	3,260	3,010
Mar	3,180	3,090
Apr	3,540	3,120
May	3,720	3,050
Jun	3,610	3,210
Jul	3,880	3,180
Aug	4,020	3,340
Sep	3,960	3,290
Oct	4,180	3,410
Nov	4,320	3,380
Dec	4,410	3,520

Dual-Series Line Chart

A year-over-year trend in inline SVG with a printed axis, no charting dependency and the same data repeated as a screen-reader table.

Charts & Metrics277 linesNo deps13 Sept

Donut Breakdown

Where a total went, drawn as one conic-gradient ring with the total in the hole and every number repeated in the legend.

Charts & Metrics205 linesNo deps2 Sept

Deploy activity

1,453 deploys across 306 active days in the last year

LessMore

Deploy activity by month
Month	deploys
Sep 2025	72
Oct 2025	90
Nov 2025	87
Dec 2025	109
Jan 2026	111
Feb 2026	69
Mar 2026	132
Apr 2026	146
May 2026	148
Jun 2026	157
Jul 2026	170
Aug 2026	162

Daily Activity Heatmap

A year of daily activity as one square per day, bucketed against a quantile so a single outlier cannot flatten the scale.

Charts & Metrics231 linesNo deps13 Sept

Signup funnel

Last 30 days

End to end 5.5%

Visited pricing18,420Top of the funnel
100.0% of the funnel
Started signup6,21533.7%from previous step
12,205 did not continue · 33.7% of everyone who started
Verified email4,98880.3%from previous step
1,227 did not continue · 27.1% of everyone who started · Link expires after 24 hours
Reached checkout1,10222.1%from previous step
3,886 did not continue · 6.0% of everyone who started
Biggest drop in the funnel — 77.9% of the previous step stops here
Paid1,01492.0%from previous step
88 did not continue · 5.5% of everyone who started

Counted as a cohort: every person here entered at the first step inside the window and is followed through in order. Someone who signed up last month and paid this month is not in these numbers, so this reads lower than a per-step total over the same period — and it is the one that answers “what happens to the people we get”.

Conversion Funnel

A funnel that leads with the step-to-step rate and the people who fell out of it, not the tidy share-of-top percentages nobody can act on. Biggest drop named in words, and a footnote saying which definition of funnel this is.

Charts & Metrics195 lines1 dep10 Sept

Alerts, and how close they are

An alert that has never fired looks identical to an alert that is broken. Showing the current distance to the threshold is what tells the two apart at a glance.

Metric Alert List

Alert thresholds with their current distance from firing, so a quiet alert is visibly armed rather than possibly broken.

Charts & Metrics141 linesNo deps13 Sept

This month

The four numbers the team looks at

Every figure names what it is being compared against. A delta with no stated period is the most common way a dashboard misleads the people who built it.

Active workspaces: 3,412
Net revenue retention: 112%
p95 latency: 412 ms
Open incidents: 1

KPI Summary Band

The top-of-dashboard figures, each carrying the comparison period that makes a delta mean anything.

Charts & Metrics118 linesNo deps

Market Price Ticker

The moving price rail that sits under an exchange’s navbar — direction carried by an arrow and a sign as well as by colour, and the duplicate half dropped rather than read twice.

Charts & Metrics180 lines1 dep