Honeycomb

34 of 40 seats are taken: Honeycomb fills 34 cells of an area-filling hex grid. The unit is the cell, so the count is countable, and this stays occupancy of a capacity rather than a magnitude. Cell size never changes with value, only the count does. 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

Use it for seats or licenses taken of a capacity, an occupancy read in a KPI card, or a countable of-total in a cell. For a capacity over about sixty use Progress, and for a magnitude with no total, MiniBar. It isn't a trend chart, and PictogramRow is the one that counts unlike things.

Sizing

Variants

Empty cells are outlined by default, so takenness survives grayscale: a filled cell against an outlined one reads without color. empty="blank" drops the empty cells entirely instead of dimming them, for surfaces where the outline reads as noise. Packing is automatic, because a near-square comb is the recognizable form; rows overrides it.

Edge cases

A value past the total fills every cell while the accessible name keeps the true number, so occupancy is never silently clipped. Above sixty cells the counting stops working, so the chart emits a dev warning; reach for Progress there.

Four homes

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 and 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.