HelixOverviewDocsComponentsSandboxTheme builderMapsBuildingGraphBuildingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Spatial TreemapView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA treemap drawn in three dimensions, each item a block whose area is its size and whose height is a second measure.ExperimentalSince 0.199.0ChartsUsageimport'@fusion.dev/helix/spatial-treemap'import'@fusion.dev/helix-headless/spatial-treemap'Preview
API ReferenceRoothelix-spatial-treemapA treemap drawn in three dimensions, each item a block whose area is its size and whose height is a second measure.
PropTypeDefaultDescriptiondataChartDataThe 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.emphasis"outlined"|"solid"|"subtle"How strongly the blocks are drawn, as on every chart.emptyTextstring"No readings"The words shown in place of the drawing when the table has no readings,
and the fallback of the empty slot.forstring""The id of the table to read.groupBystring""The column of text that gathers the rows into groups, by its heading. None by default.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 %.material"frosted"|"glass"How much of each mark comes through, as on every chart: glass admits the
most of what is behind it, frosted less, and absent is opaque. The
strength is the theme's, scaled by --helix-material-opacity.noBoxbooleanfalseDraws no box: no edges, grid, numbers, or names, so the readings stand
alone and fill the plot, as a picture on a product's own page does. The
table, the summary, the tooltip, and the keys still carry every value,
and a renderer draws no box either.plotLabelstring"3D treemap"The plot's name where the chart has none: no aria-label, label, or table caption.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.summaryLabelstring"{count, plural, one {# item} other {# items}} in {groups, plural, one {# group} other {# groups}}, sized from {low} to {high}."The summary part's sentence. {count} and {groups} are the number
of items and groups, written in the locale, and {low} and {high} the
smallest and the largest size.
ReadTypeDescriptionactivenumberThe block the keys or the pointer rest on, as its place in field.blocks, or -1.fieldTreemapFieldThe table read as blocks. **The first numeric column is each block's
size, and the second its height.** A renderer reads it.namedstringThe 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.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The renderer's box, which the 3D drawing is made in.emptyContent shown when the table has no readings. Falls back to empty-text.loadingContent shown while loading is set and there are no readings yet. Falls back to loading-text.
EventTypeDescriptionhelix-plot-changeHelixPlotChangeEventThe blocks or the block the keys rest on changed, which the renderer is told. It stays on the chart.helix-plot-turnHelixPlotTurnEventShift with an arrow asked the view to turn, by a step across or up.helix-reading-changeHelixReadingChangeEventThe reading moved, or was put away: index is the row, or -1 for none, with its label and the pointerType that moved it.helix-reading-pressHelixReadingPressEventA block was clicked or pressed with Enter or Space, with the same detail as helix-reading-change.
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.placeReading(at: { x: number; y: number } | undefined) => voidSays where the renderer draws the reading, as fractions of the plot from
its top left, or undefined while it draws none. The tooltip points
there. Called by the connector.rendererDrawn(on: unknown) => voidSays whether a renderer has drawn the blocks, which hides the chart's own
drawing or shows it again. Called by the connector.requestActive(index: number, kind: "mouse" | "pen" | "touch") => voidPuts the reading on the block at index, or lets it go with -1, as a
pointer resting on it in the renderer's drawing or a press there does.
A touch keeps it until a tap lands elsewhere, and a mouse leaving a
reading the keys moved to leaves it. Called by the connector.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.
PartDescriptionaxis-nameThe height's name, along its edge of the box, in the chart's own drawing.blockOne block, its faces in its group's color.block-activeThe block the pointer or the keys rest on. Set alongside block.drawingThe chart's own drawing in SVG: the box, its grid and numbers, and the blocks.emptyThe words when the table has no readings: the empty slot, falling back to empty-text.faceOne face of a block the view shows, shaded by which way it faces.fallbackThe box the chart's own drawing fills, shown until a renderer has drawn and where none is connected. Hidden from screen readers.gridThe box's edges and its grid, in the chart's own drawing.liveThe readout: a polite live region that says the item the keys moved to. Hide it visually.loadingThe words while loading is set and there are no readings.markThe invisible point the tooltip is anchored to, where the renderer draws the reading.plotThe 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.ringThe outline around the block the pointer or the keys rest on, painted after it, so the blocks in front of it cover it.summaryThe number of items and groups and the range of their sizes, written as a sentence for screen readers, which describes the plot. Hide it visually.tableThe readings as a table, for a screen reader, rendered only where they were drawn from data. Hide it visually.tickA height at a tick, along its edge of the box, in the chart's own drawing.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 a chart's series keys rest on, which every chart's tooltip can mark. This chart marks none, since its readout says the measure. Set alongside tooltip-cell.tooltip-labelThe row'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.
CSS PropertyDescription--spatial-treemap-block-sizeHow tall the plot is.--spatial-treemap-shadeHow far a block's face turns from the light, from 0 for its top. The component writes it on each face, and the stylesheet that shades the face reads it.
Custom stateDescriptionactiveWhile a block is shown, under the pointer or the keys.drawnWhile a renderer has drawn the blocks, and the chart's own drawing is hidden.emptyWhile the empty part stands in place of the readings.loadingWhile the loading part stands in place of the readings.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-spatial-treemapA treemap drawn in three dimensions, each item a block whose area is its size and whose height is a second measure.
PropTypeDefaultDescriptiondataChartDataThe 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.forstring""The id of the table to read.groupBystring""The column of text that gathers the rows into groups, by its heading. None by default.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 %.noBoxbooleanfalseDraws no box: no edges, grid, numbers, or names, so the readings stand
alone and fill the plot, as a picture on a product's own page does. The
table, the summary, the tooltip, and the keys still carry every value,
and a renderer draws no box either.plotLabelstring"3D treemap"The plot's name where the chart has none: no aria-label, label, or table caption.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.summaryLabelstring"{count, plural, one {# item} other {# items}} in {groups, plural, one {# group} other {# groups}}, sized from {low} to {high}."The summary part's sentence. {count} and {groups} are the number
of items and groups, written in the locale, and {low} and {high} the
smallest and the largest size.
ReadTypeDescriptionactivenumberThe block the keys or the pointer rest on, as its place in field.blocks, or -1.fieldTreemapFieldThe table read as blocks. **The first numeric column is each block's
size, and the second its height.** A renderer reads it.namedstringThe 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 blocks, which the keys walk.seriesSeries[]The table's columns, one series each. Empty when there is no table.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The renderer's box, which the 3D drawing is made in.emptyContent shown when the table has no readings. Falls back to empty-text.loadingContent shown while loading is set and there are no readings yet. Falls back to loading-text.
EventTypeDescriptionhelix-plot-changeHelixPlotChangeEventThe blocks or the block the keys rest on changed, which the renderer is told. It stays on the chart.helix-plot-turnHelixPlotTurnEventShift with an arrow asked the view to turn, by a step across or up.helix-reading-changeHelixReadingChangeEventThe reading moved, or was put away: index is the row, or -1 for none, with its label and the pointerType that moved it.helix-reading-pressHelixReadingPressEventA block was clicked or pressed with Enter or Space, with the same detail as helix-reading-change.
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.placeReading(at: { x: number; y: number } | undefined) => voidSays where the renderer draws the reading, as fractions of the plot from
its top left, or undefined while it draws none. The tooltip points
there. Called by the connector.rendererDrawn(on: unknown) => voidSays whether a renderer has drawn the blocks, which hides the chart's own
drawing or shows it again. Called by the connector.requestActive(index: number, kind: "mouse" | "pen" | "touch") => voidPuts the reading on the block at index, or lets it go with -1, as a
pointer resting on it in the renderer's drawing or a press there does.
A touch keeps it until a tap lands elsewhere, and a mouse leaving a
reading the keys moved to leaves it. Called by the connector.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.
PartDescriptionaxis-nameThe height's name, along its edge of the box, in the chart's own drawing.blockOne block, its faces in its group's color.block-activeThe block the pointer or the keys rest on. Set alongside block.drawingThe chart's own drawing in SVG: the box, its grid and numbers, and the blocks.emptyThe words when the table has no readings: the empty slot, falling back to empty-text.faceOne face of a block the view shows, shaded by which way it faces.fallbackThe box the chart's own drawing fills, shown until a renderer has drawn and where none is connected. Hidden from screen readers.gridThe box's edges and its grid, in the chart's own drawing.liveThe readout: a polite live region that says the item the keys moved to. Hide it visually.loadingThe words while loading is set and there are no readings.markThe invisible point the tooltip is anchored to, where the renderer draws the reading.plotThe 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.ringThe outline around the block the pointer or the keys rest on, painted after it, so the blocks in front of it cover it.summaryThe number of items and groups and the range of their sizes, written as a sentence for screen readers, which describes the plot. Hide it visually.tableThe readings as a table, for a screen reader, rendered only where they were drawn from data. Hide it visually.tickA height at a tick, along its edge of the box, in the chart's own drawing.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 a chart's series keys rest on, which every chart's tooltip can mark. This chart marks none, since its readout says the measure. Set alongside tooltip-cell.tooltip-labelThe row'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.
CSS PropertyDescription--spatial-treemap-shadeHow far a block's face turns from the light, from 0 for its top. The component writes it on each face, and the stylesheet that shades the face reads it.
Custom stateDescriptionactiveWhile a block is shown, under the pointer or the keys.drawnWhile a renderer has drawn the blocks, and the chart's own drawing is hidden.emptyWhile the empty part stands in place of the readings.loadingWhile the loading part stands in place of the readings.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
ExamplesNameDescriptionPreviewRequests a minute and response time for fifteen services in four teams, drawn in 3D in SVG: each block as large as its requests and as tall as its response time, in its team's color. Drag to turn the blocks, or press Shift with an arrow.PreviewRequests a minute and response time for fifteen services in four teams, drawn in 3D in SVG: each block as large as its requests and as tall as its response time, in its team's color. Drag to turn the blocks, or press Shift with an arrow.ThreeThe same services drawn in 3D by three.js. Drag to turn the blocks, or press Shift with an arrow.Without A BoxThe same services as glass blocks with no box, grid, or names around them, for a landing page. The tooltip and the table still carry every value.Without HeightsThe same services by requests alone. With no second numeric column, the blocks stand as one slab, a treemap seen in 3D.