CalendarHeatmap

Live preview

Loading example…

Contribution-style calendar: one square per day, weeks as columns (Monday first), months labelled on top. Same color scales, ranges, crosshair and keyboard model as HeatmapChart.

Import

import { CalendarHeatmap } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/heatmap-chart.

Usage

<CalendarHeatmap
  title="Ocupación de sillas por hora y día"
  rows={days}
  columns={hours}
  values={occupancy}
  scale="sequential"
  valueFormat={percent}
  domain={[0, 100]}
  cellLabels={false}
  gap={3}
  radius={4}
  legend
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`		Accessible name of the drawing and caption of the data table.
`days` *	`readonly CalendarDay[]`		One entry per day; missing days inside the range are drawn empty.
`from`	`Date`		First day shown; the earliest entry by default.
`to`	`Date`		Last day shown; the latest entry by default.
`scale`	`"sequential" \| "diverging"`	`"sequential"`
`domain`	`readonly [number, number]`
`center`	`number`	`0`
`colors`	`ScaleColors`
`ranges`	`readonly ColorRange[]`		Stepped coloring, e.g. “Sin citas”, “1-5”, “6-10”, “Más de 10”.
`valueFormat`	`ValueFormat`
`minCellSize`	`number`	`11`	Smallest cell in pixels; narrow containers show only the most recent weeks that fit.
`height`	`number \| "fill"`		Height of the drawing in px or “fill”. By default it follows the width: cells are square, so the height is the month header plus seven cell sides.
`aspectRatio`	`number`		Width / height ratio; overrides the width-derived default height.
`gap`	`number`	`3`
`radius`	`number`	`3`
`weekdays`	`readonly string[]`	`WEEKDAYS`	Weekday names Monday to Sunday; only Monday, Wednesday and Friday are drawn.
`legend`	`boolean`	`true`
`tooltip`	`boolean`	`true`
`animate`	`boolean`	`true`
`loading`	`boolean`
`labels`	`Partial<HeatmapLabels>`
`onDayClick`	`((day: CalendarDay) => void)`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/heatmap-chart/calendar-heatmap.tsx