Krizaka
Documentation

Calendar heatmap

One cell a day over a year, weeks in columns, in one sequential hue: streaks, rhythms and gaps at a glance.

WebBêtaGraphiques

Web uniquement — React, depuis @krizaka/charts/heatmap. Bêta : son API peut encore changer à une version mineure.

Quand l’utiliser

  • A daily habit or activity over months: publications, contributions, active days.

Quand ne pas l’utiliser

  • Two categorical dimensions (weekday × hour).À la place : Heatmap
  • A trend over time.À la place : Line chart

Installation

Installer

npm install @krizaka/charts

Importer

import { CalendarHeatmap } from "@krizaka/charts/heatmap";

Exemples

A year of publishing

A creator's videos published per day over a year.

Videos published, last 12 months

Calendar heatmap, Oct 10, 2025 – Oct 9, 2026. Total 307, peak 3 (Oct 17, 2025), 164 with a value.

Videos published, last 12 months — data
CategoryVideos
Oct 12, 20251
Oct 13, 20252
Oct 15, 20251
Oct 17, 20253
Oct 20, 20253
Oct 21, 20251
Oct 22, 20252
Oct 24, 20251
Oct 27, 20251
Oct 29, 20253
Oct 30, 20251
Oct 31, 20252
Nov 3, 20252
Nov 5, 20251
Nov 7, 20253
Nov 8, 20251
Nov 10, 20253
Nov 12, 20252
Nov 14, 20251
Nov 17, 20251
Nov 19, 20253
Nov 21, 20252
Nov 24, 20252
Nov 26, 20251
Nov 28, 20253
Dec 1, 20253
Dec 3, 20252
Dec 5, 20251
Dec 8, 20251
Dec 10, 20253
Dec 12, 20252
Dec 14, 20251
Dec 15, 20252
Dec 17, 20251
Dec 19, 20253
Dec 22, 20253
Dec 23, 20251
Dec 24, 20252
Dec 26, 20251
Dec 29, 20251
Dec 31, 20253
Jan 1, 20261
Jan 2, 20262
Jan 5, 20262
Jan 7, 20261
Jan 9, 20263
Jan 10, 20261
Jan 12, 20263
Jan 14, 20262
Jan 16, 20261
Jan 19, 20261
Jan 21, 20263
Jan 23, 20262
Jan 26, 20262
Jan 28, 20261
Jan 30, 20263
Feb 2, 20263
Feb 4, 20262
Feb 6, 20261
Feb 9, 20261
Feb 11, 20263
Feb 13, 20262
Feb 15, 20261
Feb 16, 20262
Feb 18, 20261
Feb 20, 20263
Feb 23, 20263
Feb 24, 20261
Feb 25, 20262
Feb 27, 20261
Mar 2, 20261
Mar 4, 20263
Mar 5, 20261
Mar 6, 20262
Mar 9, 20262
Mar 11, 20261
Mar 13, 20263
Mar 14, 20261
Mar 16, 20263
Mar 18, 20262
Mar 20, 20261
Mar 23, 20261
Mar 25, 20263
Mar 27, 20262
Mar 30, 20262
Apr 1, 20261
Apr 3, 20263
Apr 6, 20263
Apr 8, 20262
Apr 10, 20261
Apr 13, 20261
Apr 15, 20263
Apr 17, 20262
Apr 19, 20261
Apr 20, 20262
Apr 22, 20261
Apr 24, 20263
Apr 27, 20263
Apr 28, 20261
Apr 29, 20262
May 1, 20261
May 4, 20261
May 6, 20263
May 7, 20261
May 8, 20262
May 11, 20262
May 13, 20261
May 15, 20263
May 16, 20261
May 18, 20263
May 20, 20262
May 22, 20261
May 25, 20261
May 27, 20263
May 29, 20262
Jun 1, 20262
Jun 3, 20261
Jun 5, 20263
Jun 8, 20263
Jun 10, 20262
Jun 12, 20261
Jun 15, 20261
Jun 17, 20263
Jun 19, 20262
Jun 21, 20261
Jun 22, 20262
Jun 24, 20261
Jun 26, 20263
Jun 29, 20263
Jun 30, 20261
Aug 3, 20262
Aug 5, 20261
Aug 7, 20263
Aug 10, 20263
Aug 12, 20262
Aug 14, 20261
Aug 17, 20261
Aug 19, 20263
Aug 21, 20262
Aug 23, 20261
Aug 24, 20262
Aug 26, 20261
Aug 28, 20263
Aug 31, 20263
Sep 1, 20261
Sep 2, 20262
Sep 4, 20261
Sep 7, 20261
Sep 9, 20263
Sep 10, 20261
Sep 11, 20262
Sep 14, 20262
Sep 16, 20261
Sep 18, 20263
Sep 19, 20261
Sep 21, 20263
Sep 23, 20262
Sep 25, 20261
Sep 28, 20261
Sep 30, 20263
Oct 2, 20262
Oct 5, 20262
Oct 7, 20261
Oct 9, 20263

Props

PropTypeDéfautDescription
datarequisreadonly T[]—One row per day (days without a row read as nothing).
daterequisstring | ((datum: T, index: number) => unknown)—The field of the day: an ISO date (2026-04-12), a Date or an epoch.
titlerequisstring—What the chart shows, in a few words: its accessible name, and its heading unless hideTitle.
valuerequisstring | ((datum: T, index: number) => number)—The field of the day's value.
brandBrandId—The brand whose palette the charts use. Without it, a chart follows a .brand-<id> ancestor, else Krizaka. Set it when the app loads a brand stylesheet on :root (@krizaka/tokens/brands/orazaka.css).
classNamestring—A class on the figure (layout: margins, grid placement).
dataTableboolean—The "Show data" button (the table is in the page for screen readers either way). Default true.
descriptionReactNode—A sentence under the title: the period, the unit, the source.
emptyReactNode—What to show when there is nothing to draw (default: the empty label). An EmptyState of @krizaka /ui fits.
errorReactNode—The data could not be loaded: true says the default words, a node says yours (a retry button…).
exportableboolean | readonly ExportFormat[]—Export buttons: true for PNG, SVG and CSV, or the formats you want.
formatValueFormat—How the values are written.
heightnumber—The height of the plot in pixels. Default 280 (a sparkline: 32).
hideTitleboolean—Visually hide the title (it stays the chart's accessible name): a card that already has its heading.
idstring—The id of the figure.
labelsChartLabelsInput—The words, translated: the buttons, the states, the written summary.
liveboolean—Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.
loadingboolean—The data is on its way: a skeleton of the chart, announced once.
localeLocale—The locale of every figure and date ("fr-FR"). Default "en-US".
rangereadonly [string, string]—The first and last days shown. Default: the year before the last day of the data.
rendererRenderer—svg (default): sharp, exportable as SVG. canvas: for tens of thousands of marks.
styleCSSProperties—Inline style on the figure (layout only: colours come from the tokens).
summary"hidden" | "visible"—The written summary: read by screen readers only ("hidden", default), or shown under the chart ("visible").
summaryTextstring—Your own summary instead of the generated one (still read first by screen readers).
valueLabelstring—The header of the values in the data table.

Accessibilité

  • The plot is a group named by the title and described by a summary written from the data, read before anything else.
  • The data table is always in the page for assistive technology; “Show data” reveals it for everyone.
  • The engine (ECharts core and this one chart type) loads when the chart nears the screen; a skeleton of the same height holds its place, so nothing shifts.
  • Under reduced motion the chart is drawn without animation.
  • The summary says the total, the busiest day and the number of active days.

Clavier

TouchesAction
TabMoves the focus to the plot (one tab stop), then to the data and export buttons.
Arrow keysWalk the items one by one: each is announced and highlighted, its tooltip shown.
Home / EndJump to the first or the last item.
EscHides the tooltip and clears the highlight.

Bonnes pratiques

  • Pass ISO dates (2026-04-12): the month and weekday names come from the locale.
  • Leave days without activity out of the data: they are drawn empty.

Générée depuis le code de @krizaka/ui 2.4.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Bar chart

Amounts compared across categories: grouped, stacked or horizontal bars, each value written at its tip.

Candlestick

Open, high, low and close per period, rising candles hollow and falling ones filled, the volume in its own panel, zoom and thresholds.

Sur cette page

Quand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés