HelixOverviewDocsComponentsSandboxTheme builderMapsBuildingGraphBuildingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Spatial Bar ChartView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA bar chart drawn in three dimensions, each bar a block as tall as its value, for categories in one or more series.ExperimentalSince 0.199.0ChartsUsageimport'@fusion.dev/helix/spatial-bar-chart'import'@fusion.dev/helix-headless/spatial-bar-chart'Preview
API ReferenceRoothelix-spatial-bar-chartA bar chart drawn in three dimensions, each bar a block as tall as its value, for categories in one or more series.
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 bars 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.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.openLabelstring"{category}, {series}: no value"What the readout says for a place with no value. {category} and
{series} name the place.plotLabelstring"3D bar chart"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 {# bar} other {# bars}} in {series, plural, one {# series} other {# series}} over {categories, plural, one {# category} other {# categories}}, from {low} to {high}."The summary part's sentence. {count}, {series}, and {categories}
are the number of bars, series, and categories, written in the locale,
and {low} and {high} the lowest and the highest value.
ReadTypeDescriptionactivenumberThe bar the keys or the pointer rest on, as its place in field.cells, or -1.fieldBarFieldThe table read as bars. **Each row is a category, and each numeric
column a series.** 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 bars or the bar 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 bar 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 bars, 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 bar 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-nameA measure's name, along its edge of the box, in the chart's own drawing.barOne bar, its faces in its series' color.bar-activeThe bar the pointer or the keys rest on. Set alongside bar.drawingThe chart's own drawing in SVG: the box, its grid and names, and the bars.emptyThe words when the table has no readings: the empty slot, falling back to empty-text.faceOne face of a bar 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 bar 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 bar the pointer or the keys rest on, painted after it, so the bars in front of it cover it.summaryThe number of bars, series, and categories, and the range of values, 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 category's or a series' name, or a value 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-bar-chart-block-sizeHow tall the plot is.--spatial-bar-chart-shadeHow far a bar'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 bar is shown, under the pointer or the keys.drawnWhile a renderer has drawn the bars, 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-bar-chartA bar chart drawn in three dimensions, each bar a block as tall as its value, for categories in one or more series.
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.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.openLabelstring"{category}, {series}: no value"What the readout says for a place with no value. {category} and
{series} name the place.plotLabelstring"3D bar chart"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 {# bar} other {# bars}} in {series, plural, one {# series} other {# series}} over {categories, plural, one {# category} other {# categories}}, from {low} to {high}."The summary part's sentence. {count}, {series}, and {categories}
are the number of bars, series, and categories, written in the locale,
and {low} and {high} the lowest and the highest value.
ReadTypeDescriptionactivenumberThe bar the keys or the pointer rest on, as its place in field.cells, or -1.fieldBarFieldThe table read as bars. **Each row is a category, and each numeric
column a series.** 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 places on the grid, 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 bars or the bar 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 bar 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 bars, 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 bar 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-nameA measure's name, along its edge of the box, in the chart's own drawing.barOne bar, its faces in its series' color.bar-activeThe bar the pointer or the keys rest on. Set alongside bar.drawingThe chart's own drawing in SVG: the box, its grid and names, and the bars.emptyThe words when the table has no readings: the empty slot, falling back to empty-text.faceOne face of a bar 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 bar 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 bar the pointer or the keys rest on, painted after it, so the bars in front of it cover it.summaryThe number of bars, series, and categories, and the range of values, 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 category's or a series' name, or a value 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-bar-chart-shadeHow far a bar'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 bar is shown, under the pointer or the keys.drawnWhile a renderer has drawn the bars, 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.
ExamplesNameDescriptionPreviewSignups for five regions over four quarters, each a bar in its quarter's color, drawn in 3D in SVG. Drag to turn the bars, or press Shift with an arrow.PreviewSignups for five regions over four quarters, each a bar in its quarter's color, drawn in 3D in SVG. Drag to turn the bars, or press Shift with an arrow.ThreeThe same signups drawn in 3D by three.js. Drag to turn the bars, or press Shift with an arrow.WeekA week of deploys as one row of bars, the weekend low.Without A BoxA week of deploys as one row of bars with no box, grid, or names around it, for a landing page. The tooltip and the table still carry every value.