GardenGrid encodes an activity rhythm as dot area in a single ink, so it survives grayscale and print.

GardenGrid shows the rhythm of activity over time the way ActivityGrid does, in a single ink. Dot area carries a five-step ordinal, so the rhythm reads in grayscale and print where a color heatmap would collapse. The radius is √-quantized so perceived area steps evenly; a linear radius map would exaggerate the highs quadratically. A zero cell is a hairline ring, present but quiet, and a null cell is nothing at all, since print and grayscale otherwise lose the zero-versus-missing distinction color grids get for free. The steps are ordinal rather than values: ActivityGrid is the color twin when exact values matter.

GardenGrid

interactive · 4.67 kB · static · 2.07 kB

Install

Import & usereact/garden-grid

import { GardenGrid } from "@microcharts/react/garden-grid";// weeks — real values under “Sample data” below<GardenGrid data={weeks} title="Activity" unit="weeks" />

Sample data

// 12 weeks of activity, some quietconst weeks = [12, 20, 8, 0, 15, 28, 34, 5, 0, 22, 18, 9, 3, 0, 24, 30, 11, 6, 19, 0, 26];

Needs package + stylesheetSet up with AI

Try it

Live playground

onActive

idle

—

hover · rove · click…

Hover a dot, or focus the grid and walk it in 2-D with the arrow keys — each cell announces its ordinal step (1–5), not a false-precise value, since dot area reads to a step not a number.

rows · 7

steps

empty

readout

animate

import { GardenGrid } from "@microcharts/react/garden-grid/interactive";// weeks — real values under “Sample data” below<GardenGrid  data={weeks}/>

Sample data

// 12 weeks of activity, some quietconst weeks = [12, 20, 8, 0, 15, 28, 34, 5, 0, 22, 18, 9, 3, 0, 24, 30, 11, 6, 19, 0, 26];

When to use it

Use it for a contribution or activity rhythm you print or read in grayscale, a per-repo or per-team activity strip, or any calendar-shaped intensity where color isn't available. For exact per-cell values use ActivityGrid with hover or HeatStrip; for trends, Sparkline.

Sizing

strip mode for a table cell

empty='blank' for sparse data

Variants

strip mode + blank empties

Edge cases

empty data

all-zero (present, quiet — never missing)

nulls render nothing (missing ≠ zero)

single cell

Four homes

In a sentence

Contributions this quarter — busy mid-month, quiet weeks 4 and 10.

In a table cell

microcharts		34 peak
docs		22 peak
api		18 peak

In a KPI card

Activity

34peak week

In a tab header

microchartsdocsapi

Best at KPI/card scale — activity grids need room for cell area.

Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion - code samples stay on the static import. Placement recipes: Composition, Sizing.

Accessibility

The accessible name summarizes the rhythm: "12 periods; peak 34, 10 active." The interactive entry walks the grid in 2-D with the arrow keys (or hover), announcing each cell as its ordinal step — "3 of 21: 8, step 2 of 5." — because dot area reads to a step rather than a number.

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, press Escape, or press outside the chart. On touch, a tap pins and a drag scrubs.

Props

Prop	Type	Notes
data*	(number \| null)[]	Binned values; null = missing.
rows	number	Grid rows (default 7); 1 = strip.
steps	3 \| 5	Radius quantization steps (default 5).
empty	"outline" \| "blank"	How zero cells render (default outline).
unit	string	Noun for the summary count (default "periods").
cell	number	Cell edge length in viewBox units (default 10).
gap	number	Gap between cells in viewBox units (default 2).
animate	boolean	interactiveOpt-in entrance motion when the chart mounts client-side — add `import "@microcharts/react/motion"` once. Inert on the server, on hydrated server HTML, and under `prefers-reduced-motion`.

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.