Chapter 4: Color, Gradients, and Contrast

Eight schemes are built-in: github, emerald, sky, coral, amber, purple, sunset, and grayscale. Each provides a light and dark variant; dark: true toggles between them.

grid.render({ colorScheme: 'sunset', dark: true });

Choice of Palette Is Never Merely Decorative

A color scheme directly governs which nuances become visible. grayscale sounds austere, but is the most honest choice when graphics are printed or when hue already carries another semantic meaning in your dashboard.

A full year in grayscale. Height carries the visual statement entirely on its own — and succeeds.

The same principle in Coral: color reinforces what height already communicates.

Gradients Between Cells

By default, every cell is filled with a discrete color. For ribbon and flatribbon, color can smoothly interpolate between control points instead. The result reads as a continuous gradient rather than a stair-step sequence — appropriate for physical quantities that evolve smoothly.

Six months with smooth color gradients. Transitions are as seamless as the physical metrics they represent.

Zero Is Worth Its Own Color

zeroColor gives cells with an exact value of zero a dedicated color. This is more crucial than it might seem: zero is a real, measured observation, not a missing one. Conflating the two conceals outages — leading to decisions based on graphics that falsely portray missing telemetry as calm silence.

Zero values are highlighted in green, clearly distinguishing them as active measurements.

Opacity and Substrate

Setting opacity below 1.0 lets floor grid lines and rows in the background shine through. In dense arrangements, this transparency is often the decisive difference between rich 3D depth and an unreadable blur.

Semi-transparent columns: the underlying grid remains visible, anchoring spatial orientation.