Fieldbook
Sign in

Charts

Activity cell heatmap

A calendar grid of small tinted squares that sweeps in on a diagonal wave and lets a level strip isolate one intensity at a time.

Using Activity cell heatmap

A calendar grid of small tinted squares that sweeps in on a diagonal wave and lets a level strip isolate one intensity at a time.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: accent, weeks, gap, cornerRadius, weekStart, interactive

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Edge Faded Plot Grid
1853Edge Faded Plot GridChartsA plot backdrop of dashed rules that fade out at the edges, with a highlight baseline and a light band that sweeps along them.
Spoke area chart
2436Spoke area chartChartsA polar plot where labelled spokes carry one series as a translucent closed shape over a polygon grid, with a readout that snaps to the nearest spoke.
Vertex Dot Radar
2460Vertex Dot RadarChartsA single series polar chart that pins a solid dot on every axis corner so each measured value reads as a point rather than only as a silhouette.
Animated Time Axis
2104Animated Time AxisChartsA row of date labels beneath a line chart that auto-picks an evenly spaced subset to avoid crowding, and fades labels near the hovered point.
Animated Value Axis
2097Animated Value AxisChartsA column of value labels beside a chart that abbreviates large numbers and glides smoothly to new positions whenever the chart's data range changes.
Area chart lite
1525Area chart liteChartsA responsive SVG area chart with round axis ticks, a gradient fill, a crosshair that reads the sample under the pointer, and a draw-on wipe.