Honeycomb

Honeycomb answers "how many of the available slots are taken?" as filled cells in an area-filling hex grid. The unit is the cell, so the count is genuinely countable — this is occupancy of a capacity, not a magnitude. It fills row-major from the top-left, so occupancy reads as a sweep, and the whole grid is exactly two SVG paths (filled and empty) no matter how large the total.

Install

import { Honeycomb } from "@microcharts/react/honeycomb";<Honeycomb value={34} total={40} unit="seats" title="Occupancy" />

Try it

When to use it

• Good for — seats or licenses taken of a capacity, an occupancy read in a KPI card, or a countable of-total in a cell.
• Avoid for — a capacity over about sixty (that's Progress), a magnitude with no total (MiniBar), or trends.

Sizing

Variants

Edge cases

Four homes

Why this default

Outline empties are the default because takenness must survive grayscale — a filled cell versus an outlined cell reads without color. empty="blank" drops the empty cells entirely instead of dimming them, for surfaces where the outline reads as noise. Auto packing is the default because a near-square honeycomb is the recognizable form. The unit is the cell, and its size never changes with value — the count varies, the geometry doesn't — which is what keeps this honest area-filling occupancy, distinct from a PictogramRow counting unlike things. Above sixty cells, unit counting stops being countable, so the chart emits a dev warning and the docs steer to Progress. A value past the total fills every cell, but the accessible name still states the true number — occupancy is never silently clipped.

Accessibility

The accessible name is the exact occupancy — "45 of 40 seats filled." — always the true value, even when it exceeds the total. The interactive entry announces the count on change through a polite live region and reveals the value / total on hover. Focus it and the arrow keys rove cell by cell (←/→ within a row, ↑/↓ holding the column), each cell announced as "Cell 7 of 40 — filled."

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape. On touch, a tap pins and a drag scrubs.

Props

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.