HelixOverviewDocsComponentsSandboxTheme builderMapsBuildingGraphBuildingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Spatial Scatter ChartView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA chart that plots each row as a point in three dimensions, for data with three measures.ExperimentalSince 0.190.0ChartsUsageimport'@fusion.dev/helix/spatial-scatter-chart'import'@fusion.dev/helix-headless/spatial-scatter-chart'Preview
API ReferenceRoothelix-spatial-scatter-chartA chart that plots each row as a point in three dimensions, for data with three measures.
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.dropLinesbooleanfalseDraws a line from each point straight down to the floor of the box, in
its group's color, so where a point stands across and in depth reads off
the floor's grid. A renderer draws them too.emphasis"outlined"|"solid"|"subtle"How strongly the points 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 puts each point in a group, 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 scatter 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 {# point} other {# points}}: {x} across, {y} up, and {z} in depth."The summary part's sentence. {count} is the number of points, written
in the locale, and {x}, {y}, and {z} are the three measures' names.
ReadTypeDescriptionactivenumberThe point the keys or the pointer rest on, as its place in field.points, or -1.fieldPlotFieldThe table read as points, axes, and groups. **The first three numeric
columns are across, up, and in depth**, and a row lacking any of them is
left out. 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 points. Falls back to empty-text.loadingContent shown while loading is set and there are no points yet. Falls back to loading-text.
EventTypeDescriptionhelix-plot-changeHelixPlotChangeEventThe points or the point 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 point was clicked, tapped, 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 points, 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 point 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.drawingThe chart's own drawing in SVG: the box, its grid and numbers, and the points.drop-lineThe line from a point straight down to the floor of the box, drawn under drop-lines, in its group's color.emptyThe words when the table has no points: the empty slot, falling back to empty-text.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 at the ticks, in the chart's own drawing.liveThe readout: a polite live region that says the point the keys moved to. Hide it visually.loadingThe words while loading is set and there are no points.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.pointOne point of the chart's own drawing.point-activeThe point the pointer or the keys rest on, in the chart's own drawing. Set alongside point.ringThe ring around the point the pointer or the keys rest on, drawn over every point.summaryThe three measures and the number of points, 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 number 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-scatter-chart-block-sizeHow tall the plot is.
Custom stateDescriptionactiveWhile a point is shown, under the pointer or the keys.drawnWhile a renderer has drawn the points, and the chart's own drawing is hidden.emptyWhile the empty part stands in place of the points.loadingWhile the loading part stands in place of the points.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-spatial-scatter-chartA chart that plots each row as a point in three dimensions, for data with three measures.
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.dropLinesbooleanfalseDraws a line from each point straight down to the floor of the box, in
its group's color, so where a point stands across and in depth reads off
the floor's grid. A renderer draws them too.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 puts each point in a group, 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 scatter 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 {# point} other {# points}}: {x} across, {y} up, and {z} in depth."The summary part's sentence. {count} is the number of points, written
in the locale, and {x}, {y}, and {z} are the three measures' names.
ReadTypeDescriptionactivenumberThe point the keys or the pointer rest on, as its place in field.points, or -1.fieldPlotFieldThe table read as points, axes, and groups. **The first three numeric
columns are across, up, and in depth**, and a row lacking any of them is
left out. 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 points, 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 points. Falls back to empty-text.loadingContent shown while loading is set and there are no points yet. Falls back to loading-text.
EventTypeDescriptionhelix-plot-changeHelixPlotChangeEventThe points or the point 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 point was clicked, tapped, 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 points, 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 point 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.drawingThe chart's own drawing in SVG: the box, its grid and numbers, and the points.drop-lineThe line from a point straight down to the floor of the box, drawn under drop-lines, in its group's color.emptyThe words when the table has no points: the empty slot, falling back to empty-text.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 at the ticks, in the chart's own drawing.liveThe readout: a polite live region that says the point the keys moved to. Hide it visually.loadingThe words while loading is set and there are no points.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.pointOne point of the chart's own drawing.point-activeThe point the pointer or the keys rest on, in the chart's own drawing. Set alongside point.ringThe ring around the point the pointer or the keys rest on, drawn over every point.summaryThe three measures and the number of points, 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 number 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.
Custom stateDescriptionactiveWhile a point is shown, under the pointer or the keys.drawnWhile a renderer has drawn the points, and the chart's own drawing is hidden.emptyWhile the empty part stands in place of the points.loadingWhile the loading part stands in place of the points.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
ExamplesNameDescriptionPreviewForty-five customers by age, yearly spend, and visits a month, drawn in 3D in SVG. Press Shift with an arrow to turn the box.PreviewForty-five customers by age, yearly spend, and visits a month, drawn in 3D in SVG. Press Shift with an arrow to turn the box.ThreeThe same customers drawn in 3D by three.js. Drag to turn the box, or press Shift with an arrow.With Drop LinesThe same customers with a line from each point down to the floor, so where each stands across and in depth reads off the grid.Without A BoxCustomers as three soft clusters with no box, grid, or names around them, for a landing page. The tooltip and the table still carry every value.