HelixOverviewDocsComponentsSandboxTheme builderMapsBuildingGraphBuildingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Isometric HeatmapView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA heatmap drawn as a relief, where each reading stands as tall as its value.ExperimentalSince 0.185.0ChartsUsageimport'@fusion.dev/helix/isometric-heatmap'import'@fusion.dev/helix-headless/isometric-heatmap'Preview
API ReferenceRoothelix-isometric-heatmapA heatmap drawn as a relief, where each reading stands as tall as its value.
PropTypeDefaultDescriptionbusiestLabelstring"Busiest"The name the overview gives the busiest reading, {busiestLabel} in
overview-label.dataChartDataThe readings as data, in the shape of a table, where the page has no
table to point for at. for wins where both are set.emptyTextstring"No readings"The words shown in place of the drawing when the table has no readings,
and the fallback of the empty slot.flatbooleanfalseDraws every prism at no height, so the tones lie on a plane.forstring""The id of the table to read.gapnumber2Space between cells, in CSS pixels. It is a number for the same reason
min-cell is.labelstring""The chart's name, which starts the chart's text summary.loadingbooleanfalseWhether the readings are still on their way. The chart shows
loading-text in place of an empty drawing until it has readings.loadingTextstring"Loading readings"The words shown in place of the drawing while loading is set and
there are no readings yet, and the fallback of the loading slot.localestring""The locale the chart's own numbers are written in: its axis, its
percentages and its totals, such as de for 1.240 and 32 %.minCellnumber10The smallest cell, in CSS pixels, before the strip draws fewer columns.
gap is two pixels at that size, so a prism covers five sixths of its cell.overviewLabelstring"{busiestLabel}: {busiest}; {totalLabel} {total}."The overview's sentence. {busiestLabel} and {totalLabel} are
busiest-label and total-label, {busiest} the busiest reading's name
and its reading as the table writes it, and {total} the total of the
readings drawn, written in the locale.positionLabelstring"{position} of {count}"Where a reading the keys moved to stands among the readings, said after
it. {position} and {count} are replaced with the numbers, written in
locale.reliefnumber2How tall the highest reading stands, in cells. Every other reading stands
at its share of it.rowsnumber1How many rows the strip has.selectedLabelstring"selected"What the readout added for a selected cell, under selection-mode.selectionLabelstring"{count, plural, one {# selected} other {# selected}}"What the selection part says after the selection changes. {count} is
how many cells are selected, written in the locale, and a language that
needs plural forms writes them: {count, plural, one {# wybrany} few {# wybrane} many {# wybranych} other {# wybranego}}.selectionMode"multiple"|"single"How many cells a reader can select: single or multiple.selectionShape"linear"|"rectangle""linear"What Shift takes in under selection-mode="multiple": linear, every
cell between two in the table's order, or rectangle, the cells between
two corners by row and by column, as a spreadsheet selects a range.stripLabelstring"Heatmap"The strip's name where the chart has none: no aria-label, label, or
table caption.thresholdsstring""Lower bounds for the tone buckets, in the order the tones are given.tonesstring""The tone for each bucket, in the same order as thresholds.totalLabelstring"Total"The name the overview gives the total of the readings drawn,
{totalLabel} in overview-label.valuestring""The selected cells, separated by commas: each by the date its row's
header carries in a <time datetime>, such as 2026-06-11, or by the
header's words where it carries none.
ReadTypeDescriptionnamedstringThe chart's name: an aria-label written on the chart, then label,
then the table's caption.plottedColumnsnumber[]The positions of the cells in a row that hold numbers, in table order.readingsnumberThe number of readings, which the pointer position maps onto.seriesSeries[]The table's columns, one series each. Empty when there is no table.visiblenumberHow many cells are actually drawn.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionemptyContent shown under the strip when the table has no readings, such as a link to add the first. Falls back to empty-text.endBelow the strip, at the trailing edge: usually the newest date.loadingContent shown under the strip while loading is set and there are no readings yet. Falls back to loading-text.startBelow the strip, at the leading edge: usually the oldest date.summaryBelow the strip, in the middle: a summary of the range shown.
EventTypeDescriptionchangeEventFired once a press or a key has changed which cells are selected.helix-before-changeHelixBeforeChangeEventFired before a press or a key changes which cells are selected, with the value it would leave. Cancelable.helix-reading-changeHelixReadingChangeEventThe reading shown moved, or was put away: index is the row, or -1 for none, with its label, the series the keys rest on, and the pointerType that moved it.helix-reading-pressHelixReadingPressEventA reading was clicked, tapped, or pressed with Enter or Space, with the same detail as helix-reading-change.helix-resizeHelixResizeEventFired when the number of cells drawn changes, with the new number.
MethodTypeDescriptioncolumnName(cell: number) => stringThe heading of the column at this place in a row: a cell's name is its
column's heading, read from the first row that has a cell there, so a
short first row does not lose the heading. '' where no row has one.pageFrom(at: number, forward: boolean) => number | undefinedWhere PageUp or PageDown goes from the drawn cell at at: the same day a
month on or back, by the dates the rows' headers carry. Undefined where
they carry none, and the keys move four columns.seriesOf(cell: number) => number | undefinedThe palette slot for the cell at this position in a row.showsColumn(cell: number) => booleanWhether the series read from the cell at this place in a row is drawn,
by its column's heading. The keys and the readout pass over one a
legend hid.showsSeries(name: string) => booleanWhether the series of this name is drawn, which it is unless a legend
reading the same table hid it.
PartDescriptioncellOne reading.cell-activeThe cell the pointer or the keys rest on. Set alongside cell.cell-selectedA cell that is selected, under selection-mode. Set alongside cell.drawingThe SVG every prism is drawn in. It is mirrored on a right-to-left page.emptyThe words under the strip when the table has no readings: the empty slot, falling back to empty-text. Not drawn while the table cannot be read yet, on the server and during hydration, there being no document to resolve for in.endThe trailing slot's box.footerThe three-slot row under the strip.left-faceThe face of a prism toward the next row, drawn at its lower left.liveThe readout: a polite live region that says the cell the keys moved to. Hide it visually.loadingThe words under the strip while loading is set and there are no readings: the loading slot, falling back to loading-text.markThe invisible point the tooltip is anchored to.overviewThe busiest reading and the total of the readings drawn, written as a sentence for screen readers, which describes the strip. Rendered once there are cells. Hide it visually.plotThe same element as strip, under the name every chart gives the drawing that takes focus.right-faceThe face of a prism toward the next column, drawn at its lower right.rowA column of cells, which a grid reads as a row, under selection-mode. It draws no box.selectionA polite region that says how many cells are selected after a change, rendered from the first change. Hide it visually.startThe leading slot's box.stripThe grid of cells, which takes focus to be read by key. It is named by the host's aria-labelledby or aria-label, then by label, then by the caption of the table.summaryThe middle slot's box.tableThe readings as a table, for a screen reader, rendered only where they were drawn from data. Hide it visually.tooltipThe bubble, forwarded from Tooltip.tooltip-anchorThe Tooltip element itself.tooltip-arrowThe bubble's point, forwarded from Tooltip.tooltip-arrow-bottomThe point while the bubble is below the reading, on its top edge. Set alongside tooltip-arrow.tooltip-arrow-leftThe point while the bubble is left of the reading, on its right edge. Set alongside tooltip-arrow.tooltip-arrow-rightThe point while the bubble is right of the reading, on its left edge. Set alongside tooltip-arrow.tooltip-arrow-topThe point while the bubble is above the reading, on its bottom edge. Set alongside tooltip-arrow.tooltip-bottomThe bubble while it is below the reading. Set alongside tooltip.tooltip-cellOne column's name and value inside the tooltip.tooltip-cell-currentThe cell the series keys rest on, in the charts whose readings hold several series. A strip draws one, so it is never set here.tooltip-labelThe reading's own name inside the tooltip.tooltip-leftThe bubble while it is left of the reading. Set alongside tooltip.tooltip-nameA column's name inside the tooltip.tooltip-rightThe bubble while it is right of the reading. Set alongside tooltip.tooltip-topThe bubble while it is above the reading. Set alongside tooltip.tooltip-valueA column's value inside the tooltip.top-faceThe top of a prism, which carries the reading's tone.
CSS PropertyDescription--heatmap-rowsHow many rows the strip lays out. The component writes it from the data, and the stylesheet that draws the strip reads it.--heatmap-toneThe tone of the cell it is set on. The component writes it, and the stylesheet that paints the cell reads it.--heatmap-tone-1The weakest step of the magnitude ramp, used by tones="1 …".--heatmap-tone-2The second step of the magnitude ramp.--heatmap-tone-3The third step of the magnitude ramp.--heatmap-tone-4The fourth step of the magnitude ramp.--heatmap-tone-5The strongest step of the magnitude ramp.--heatmap-tone-accentThe color of the accent tone.--heatmap-tone-dangerThe color of the danger tone.--heatmap-tone-infoThe color of the info tone.--heatmap-tone-mutedThe color of the muted tone: a quiet background, for a bucket that means nothing happened.--heatmap-tone-primaryThe color of the primary tone.--heatmap-tone-successThe color of the success tone, named in tones or in data-tone.--heatmap-tone-warningThe color of the warning tone.--isometric-heatmap-cell-sizeThe largest a cell grows, along its edge. The strip is never wider than its box, and draws smaller cells to fit.--isometric-heatmap-left-shadeHow much darker the left face is than the top, as a percentage mixed toward black.--isometric-heatmap-right-shadeHow much darker the right face is than the top, as a percentage mixed toward black.--isometric-heatmap-selected-colorThe color of the dashed edges of a selected prism, under selection-mode. By default, white on a dark face and black on a light one.--isometric-heatmap-spanHow many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it.
Custom stateDescriptionactiveWhile a cell is shown, under the pointer or the keys, with its tooltip open.emptyWhile the empty part stands in place of the cells.loadingWhile the loading part stands in place of the cells.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-isometric-heatmapA heatmap drawn as a relief, where each reading stands as tall as its value.
PropTypeDefaultDescriptionbusiestLabelstring"Busiest"The name the overview gives the busiest reading, {busiestLabel} in
overview-label.dataChartDataThe readings as data, in the shape of a table, where the page has no
table to point for at. for wins where both are set.emptyTextstring"No readings"The words shown in place of the drawing when the table has no readings,
and the fallback of the empty slot.flatbooleanfalseDraws every prism at no height, so the tones lie on a plane.forstring""The id of the table to read.gapnumber2Space between cells, in CSS pixels. It is a number for the same reason
min-cell is.labelstring""The chart's name, which starts the chart's text summary.loadingbooleanfalseWhether the readings are still on their way. The chart shows
loading-text in place of an empty drawing until it has readings.loadingTextstring"Loading readings"The words shown in place of the drawing while loading is set and
there are no readings yet, and the fallback of the loading slot.localestring""The locale the chart's own numbers are written in: its axis, its
percentages and its totals, such as de for 1.240 and 32 %.minCellnumber8The smallest a cell may get before the strip draws fewer of them, in CSS pixels.overviewLabelstring"{busiestLabel}: {busiest}; {totalLabel} {total}."The overview's sentence. {busiestLabel} and {totalLabel} are
busiest-label and total-label, {busiest} the busiest reading's name
and its reading as the table writes it, and {total} the total of the
readings drawn, written in the locale.positionLabelstring"{position} of {count}"Where a reading the keys moved to stands among the readings, said after
it. {position} and {count} are replaced with the numbers, written in
locale.reliefnumber2How tall the highest reading stands, in cells. Every other reading stands
at its share of it.rowsnumber1How many rows the strip has.selectedLabelstring"selected"What the readout added for a selected cell, under selection-mode.selectionLabelstring"{count, plural, one {# selected} other {# selected}}"What the selection part says after the selection changes. {count} is
how many cells are selected, written in the locale, and a language that
needs plural forms writes them: {count, plural, one {# wybrany} few {# wybrane} many {# wybranych} other {# wybranego}}.selectionMode"multiple"|"single"How many cells a reader can select: single or multiple.selectionShape"linear"|"rectangle""linear"What Shift takes in under selection-mode="multiple": linear, every
cell between two in the table's order, or rectangle, the cells between
two corners by row and by column, as a spreadsheet selects a range.stripLabelstring"Heatmap"The strip's name where the chart has none: no aria-label, label, or
table caption.thresholdsstring""Lower bounds for the tone buckets, in the order the tones are given.tonesstring""The tone for each bucket, in the same order as thresholds.totalLabelstring"Total"The name the overview gives the total of the readings drawn,
{totalLabel} in overview-label.valuestring""The selected cells, separated by commas: each by the date its row's
header carries in a <time datetime>, such as 2026-06-11, or by the
header's words where it carries none.
ReadTypeDescriptionnamedstringThe chart's name: an aria-label written on the chart, then label,
then the table's caption.plottedColumnsnumber[]The positions of the cells in a row that hold numbers, in table order.readingsnumberThe number of readings, which the pointer position maps onto.seriesSeries[]The table's columns, one series each. Empty when there is no table.visiblenumberHow many cells are actually drawn.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionemptyContent shown under the strip when the table has no readings, such as a link to add the first. Falls back to empty-text.endBelow the strip, at the trailing edge: usually the newest date.loadingContent shown under the strip while loading is set and there are no readings yet. Falls back to loading-text.startBelow the strip, at the leading edge: usually the oldest date.summaryBelow the strip, in the middle: a summary of the range shown.
EventTypeDescriptionchangeEventFired once a press or a key has changed which cells are selected.helix-before-changeHelixBeforeChangeEventFired before a press or a key changes which cells are selected, with the value it would leave. Cancelable.helix-reading-changeHelixReadingChangeEventThe reading shown moved, or was put away: index is the row, or -1 for none, with its label, the series the keys rest on, and the pointerType that moved it.helix-reading-pressHelixReadingPressEventA reading was clicked, tapped, or pressed with Enter or Space, with the same detail as helix-reading-change.helix-resizeHelixResizeEventFired when the number of cells drawn changes, with the new number.
MethodTypeDescriptioncolumnName(cell: number) => stringThe heading of the column at this place in a row: a cell's name is its
column's heading, read from the first row that has a cell there, so a
short first row does not lose the heading. '' where no row has one.pageFrom(at: number, forward: boolean) => number | undefinedWhere PageUp or PageDown goes from the drawn cell at at: the same day a
month on or back, by the dates the rows' headers carry. Undefined where
they carry none, and the keys move four columns.seriesOf(cell: number) => number | undefinedThe palette slot for the cell at this position in a row.showsColumn(cell: number) => booleanWhether the series read from the cell at this place in a row is drawn,
by its column's heading. The keys and the readout pass over one a
legend hid.showsSeries(name: string) => booleanWhether the series of this name is drawn, which it is unless a legend
reading the same table hid it.
PartDescriptioncellOne reading: a group holding its three faces.cell-activeThe cell the pointer or the keys rest on. Set alongside cell.cell-selectedA cell that is selected, under selection-mode. Set alongside cell.drawingThe SVG every prism is drawn in. It is mirrored on a right-to-left page.emptyThe words under the strip when the table has no readings: the empty slot, falling back to empty-text. Not drawn while the table cannot be read yet, on the server and during hydration, there being no document to resolve for in.endThe trailing slot's box.footerThe three-slot row under the strip.left-faceThe face of a prism toward the next row, drawn at its lower left.liveThe readout: a polite live region that says the cell the keys moved to. Hide it visually.loadingThe words under the strip while loading is set and there are no readings: the loading slot, falling back to loading-text.markThe invisible point the tooltip is anchored to.overviewThe busiest reading and the total of the readings drawn, written as a sentence for screen readers, which describes the strip. Rendered once there are cells. Hide it visually.plotThe same element as strip, under the name every chart gives the drawing that takes focus.right-faceThe face of a prism toward the next column, drawn at its lower right.rowA column of prisms, which a grid reads as a row, under selection-mode.selectionA polite region that says how many cells are selected after a change, rendered from the first change. Hide it visually.startThe leading slot's box.stripThe box the drawing fills, which takes focus to be read by key. It is named by the host's aria-labelledby or aria-label, then by label, then by the caption of the table.summaryThe middle slot's box.tableThe readings as a table, for a screen reader, rendered only where they were drawn from data. Hide it visually.tooltipThe bubble, forwarded from Tooltip.tooltip-anchorThe Tooltip element itself.tooltip-arrowThe bubble's point, forwarded from Tooltip.tooltip-arrow-bottomThe point while the bubble is below the reading, on its top edge. Set alongside tooltip-arrow.tooltip-arrow-leftThe point while the bubble is left of the reading, on its right edge. Set alongside tooltip-arrow.tooltip-arrow-rightThe point while the bubble is right of the reading, on its left edge. Set alongside tooltip-arrow.tooltip-arrow-topThe point while the bubble is above the reading, on its bottom edge. Set alongside tooltip-arrow.tooltip-bottomThe bubble while it is below the reading. Set alongside tooltip.tooltip-cellOne column's name and value inside the tooltip.tooltip-cell-currentThe cell the series keys rest on, in the charts whose readings hold several series. A strip draws one, so it is never set here.tooltip-labelThe reading's own name inside the tooltip.tooltip-leftThe bubble while it is left of the reading. Set alongside tooltip.tooltip-nameA column's name inside the tooltip.tooltip-rightThe bubble while it is right of the reading. Set alongside tooltip.tooltip-topThe bubble while it is above the reading. Set alongside tooltip.tooltip-valueA column's value inside the tooltip.top-faceThe top of a prism, which carries the reading's tone.
CSS PropertyDescription--heatmap-rowsHow many rows the strip lays out. The component writes it from the data, and the stylesheet that draws the strip reads it.--heatmap-toneThe tone of the cell it is set on. The component writes it, and the stylesheet that paints the cell reads it.--heatmap-tone-1The weakest step of the magnitude ramp, used by tones="1 …".--heatmap-tone-2The second step of the magnitude ramp.--heatmap-tone-3The third step of the magnitude ramp.--heatmap-tone-4The fourth step of the magnitude ramp.--heatmap-tone-5The strongest step of the magnitude ramp.--heatmap-tone-accentThe color of the accent tone.--heatmap-tone-dangerThe color of the danger tone.--heatmap-tone-infoThe color of the info tone.--heatmap-tone-mutedThe color of the muted tone: a quiet background, for a bucket that means nothing happened.--heatmap-tone-primaryThe color of the primary tone.--heatmap-tone-successThe color of the success tone, named in tones or in data-tone.--heatmap-tone-warningThe color of the warning tone.--isometric-heatmap-spanHow many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it.
Custom stateDescriptionactiveWhile a cell is shown, under the pointer or the keys, with its tooltip open.emptyWhile the empty part stands in place of the cells.loadingWhile the loading part stands in place of the cells.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
ExamplesNameDescriptionPreviewSixteen weeks of commits, each day a prism as tall as its count.PreviewSixteen weeks of commits, each day a prism as tall as its count.