HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Scatter ChartView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA chart that shows whether two measures move together, with one point per row.StableSince 0.1.0ChartsUsageimport'@fusion.dev/helix/scatter-chart'import'@fusion.dev/helix-headless/scatter-chart'Preview
API ReferenceRoothelix-scatter-chartA chart that shows whether two measures move together, with one point per row.
PropTypeDescriptioncorrelationLabelstringDefault"correlation"The word for the strength of the relation, {correlationLabel} in
series-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.emptyTextstringDefault"No readings"The words shown in place of the drawing when the table has no readings,
and the fallback of the empty slot.forstringDefault""The id of the table to read.gridlines"both"|"x"|"y"Which gridlines are drawn across the plot, if any.labelstringDefault""The chart's name, which starts the chart's text summary.loadingbooleanDefaultfalseWhether the readings are still on their way. The chart shows
loading-text in place of an empty drawing until it has readings.loadingTextstringDefault"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.localestringDefault""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 %.nextReadingsLabelstringDefault"Next readings"The name of the button that shows the next page of readings in the
table drawn from data, which holds a page at a time past
READINGS_PAGE.pointsLabelstringDefault"{count, plural, one {point} other {points}}"The word for the rows a series rests on, {pointsLabel} in
series-label. {count} is how many, so the word takes its plural
forms: {count, plural, one {punkt} few {punkty} other {punktów}}.positionLabelstringDefault"{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.previousReadingsLabelstringDefault"Previous readings"The name of the button that shows the previous page of readings in the
table drawn from data.readingsLabelstringDefault"Readings {first} to {last} of {count}"Which readings the page of the table drawn from data holds, said
beside its buttons and as each page arrives. {first}, {last} and
{count} are replaced with the numbers, written in locale.seriesLabelstringDefault"{correlation, select, none {{y} / {x}: {count} {pointsLabel}} other {{y} / {x}: {count} {pointsLabel}, {correlationLabel} {correlation}}}"What the summary says of each series. {y} is what the series measures up,
{x} what the chart measures across, {count} how many rows it rests on,
written in the locale, {pointsLabel} the word for them, and
{correlation} its correlation, or none where there are fewer than
three points or no spread to measure, so each case is a whole sentence:
{correlation, select, none {...} other {...}}. {correlationLabel} is
correlation-label.sizeBystringDefault""The heading of a column whose numbers size the points, such as
Population, which makes the chart a bubble chart.trendbooleanDefaultfalseDraws each series' line of best fit across the plot, by least squares, in
the series' color: the regression line a reader would otherwise draw by
eye.
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.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionemptyContent shown in place of the drawing when the table has no readings, such as a link to add the first. Falls back to empty-text.loadingContent shown in place of the drawing while loading is set and there are no readings yet. Falls back to loading-text.
EventTypeDescriptionhelix-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.
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.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.
PartDescriptionemptyThe words in place of the drawing 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.gridlineOne line across the plot, drawn when gridlines is set.liveThe readout: a polite live region that says the row the keys moved to. Hide it visually.loadingThe words in place of the drawing 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.planeThe grid that holds the plot, both axes, and their names. It runs left to right on every page.plotThe drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the empty or loading part.pointThe points of one size in a points group, as one path with a stroke of no length at each: give it a round stroke-linecap, a stroke-width the size of a point and vector-effect: non-scaling-stroke. Under size-by, it carries its points' size as --chart-point-weight.point-activeThe point of the row the reading rests on, one for each series with a point in that row, drawn over the others as an element of its own and placed by --chart-point-x and --chart-point-y. Under size-by, it carries its size as --chart-point-weight.point-ringThe points of a point path again, under it, to stroke a little wider in the page's color, so each point keeps its edge where it overlaps another.pointsThe points of one series that do not overlap one another, as a group of their point-ring and point paths. Its opacity is each point's, so where points overlap they darken. Carries its series color as --chart-series.summaryThe text that says how strongly the measures relate, for people who cannot see the points.svgThe drawing surface the gridlines and the trend lines sit on.tableThe readings as a table, for a screen reader, rendered only where they were drawn from data, a page of them at a time past a few hundred. Hide it visually.table-pagesWhich readings a page of the table holds, and the buttons that show the previous and the next page, rendered only while it holds a page. Hide it visually.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-cellOne column's name and value inside the tooltip.tooltip-cell-currentThe cell the up and down arrows rest on, while they rest there. Set alongside tooltip-cell.tooltip-labelThe row's own name inside the tooltip.tooltip-nameA column's name inside the tooltip.tooltip-surfaceThe bubble, forwarded from Tooltip.tooltip-surface-bottomThe bubble while it is below the reading. Set alongside tooltip-surface.tooltip-surface-leftThe bubble while it is left of the reading. Set alongside tooltip-surface.tooltip-surface-rightThe bubble while it is right of the reading. Set alongside tooltip-surface.tooltip-surface-topThe bubble while it is above the reading. Set alongside tooltip-surface.tooltip-valueA column's value inside the tooltip.trendOne series' line of best fit, under trend. Carries its series color as --chart-series.x-axisThe values along the horizontal axis, under the plot.x-nameThe name of the horizontal measure.x-tickOne labeled value on the horizontal axis. Each axis has its own tick part, because ::part() cannot tell which axis a tick is on. The one at the far edge carries data-edge="end".y-axisThe values along the vertical axis, beside the plot.y-nameThe name of the vertical measure.y-tickOne labeled value on the vertical axis.
CSS PropertyDescription--chart-point-weightHow large a point is drawn under size-by, from 0 to 1, by area, in steps of a thirty-second. The component writes it on each point, point-ring, and point-active, and the stylesheet that sizes the point reads it.--chart-point-xThe horizontal position of a point-active, as a percentage. The component writes it.--chart-point-yThe vertical position of a point-active, as a percentage from the top. The component writes it.--chart-tickA tick's position along its axis, as a percentage. The component writes it.--scatter-chart-block-sizeHeight of the drawing.--scatter-chart-bubble-sizeDiameter of the largest point under size-by. The smallest is --scatter-chart-point-size.--scatter-chart-gapSpace between the drawing and its axes.--scatter-chart-gridline-colorColor of the gridlines across the plot, drawn when gridlines is set.--scatter-chart-point-opacityOpacity of a point, so a cluster looks darker where it is denser.--scatter-chart-point-ring-colorColor of the ring around each point. It matches the page, so change it when the chart sits on another surface.--scatter-chart-point-sizeDiameter of a point.--scatter-chart-trend-dashThe dash pattern of a line of best fit, under trend, as stroke-dasharray takes it. none draws it solid.--scatter-chart-trend-widthThe thickness of a line of best fit, under trend.
Custom stateDescriptionactiveWhile a reading is shown, under the pointer or the keys, with its tooltip open.emptyWhile the empty part stands in the plot.loadingWhile the loading part stands in the plot.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-scatter-chartA chart that shows whether two measures move together, with one point per row.
PropTypeDescriptioncorrelationLabelstringDefault"correlation"The word for the strength of the relation, {correlationLabel} in
series-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.emptyTextstringDefault"No readings"The words shown in place of the drawing when the table has no readings,
and the fallback of the empty slot.forstringDefault""The id of the table to read.gridlines"both"|"x"|"y"Which gridlines are drawn across the plot, if any.labelstringDefault""The chart's name, which starts the chart's text summary.loadingbooleanDefaultfalseWhether the readings are still on their way. The chart shows
loading-text in place of an empty drawing until it has readings.loadingTextstringDefault"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.localestringDefault""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 %.nextReadingsLabelstringDefault"Next readings"The name of the button that shows the next page of readings in the
table drawn from data, which holds a page at a time past
READINGS_PAGE.pointsLabelstringDefault"{count, plural, one {point} other {points}}"The word for the rows a series rests on, {pointsLabel} in
series-label. {count} is how many, so the word takes its plural
forms: {count, plural, one {punkt} few {punkty} other {punktów}}.positionLabelstringDefault"{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.previousReadingsLabelstringDefault"Previous readings"The name of the button that shows the previous page of readings in the
table drawn from data.readingsLabelstringDefault"Readings {first} to {last} of {count}"Which readings the page of the table drawn from data holds, said
beside its buttons and as each page arrives. {first}, {last} and
{count} are replaced with the numbers, written in locale.seriesLabelstringDefault"{correlation, select, none {{y} / {x}: {count} {pointsLabel}} other {{y} / {x}: {count} {pointsLabel}, {correlationLabel} {correlation}}}"What the summary says of each series. {y} is what the series measures up,
{x} what the chart measures across, {count} how many rows it rests on,
written in the locale, {pointsLabel} the word for them, and
{correlation} its correlation, or none where there are fewer than
three points or no spread to measure, so each case is a whole sentence:
{correlation, select, none {...} other {...}}. {correlationLabel} is
correlation-label.sizeBystringDefault""The heading of a column whose numbers size the points, such as
Population, which makes the chart a bubble chart.trendbooleanDefaultfalseDraws each series' line of best fit across the plot, by least squares, in
the series' color: the regression line a reader would otherwise draw by
eye.
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.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionemptyContent shown in place of the drawing when the table has no readings, such as a link to add the first. Falls back to empty-text.loadingContent shown in place of the drawing while loading is set and there are no readings yet. Falls back to loading-text.
EventTypeDescriptionhelix-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.
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.seriesOf(cell: number) => number | undefinedThe palette slot a cell of a row is drawn in, which here is shifted by one.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.
PartDescriptionemptyThe words in place of the drawing 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.gridlineOne line across the plot, drawn when gridlines is set.liveThe readout: a polite live region that says the row the keys moved to. Hide it visually.loadingThe words in place of the drawing 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.planeThe grid that holds the plot, both axes, and their names. It runs left to right on every page.plotThe drawing, which takes focus to be read by key. With nothing to draw, a group named as the chart is, holding the empty or loading part.pointThe points of one size in a points group, as one path with a stroke of no length at each: give it a round stroke-linecap, a stroke-width the size of a point and vector-effect: non-scaling-stroke. Under size-by, it carries its points' size as --chart-point-weight.point-activeThe point of the row the reading rests on, one for each series with a point in that row, drawn over the others as an element of its own and placed by --chart-point-x and --chart-point-y. Under size-by, it carries its size as --chart-point-weight.point-ringThe points of a point path again, under it, to stroke a little wider in the page's color, so each point keeps its edge where it overlaps another.pointsThe points of one series that do not overlap one another, as a group of their point-ring and point paths. Its opacity is each point's, so where points overlap they darken. Carries its series color as --chart-series.summaryThe text that says how strongly the measures relate, for people who cannot see the points.svgThe drawing surface the gridlines and the trend lines sit on.tableThe readings as a table, for a screen reader, rendered only where they were drawn from data, a page of them at a time past a few hundred. Hide it visually.table-pagesWhich readings a page of the table holds, and the buttons that show the previous and the next page, rendered only while it holds a page. Hide it visually.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-cellOne column's name and value inside the tooltip.tooltip-cell-currentThe cell the up and down arrows rest on, while they rest there. Set alongside tooltip-cell.tooltip-labelThe row's own name inside the tooltip.tooltip-nameA column's name inside the tooltip.tooltip-surfaceThe bubble, forwarded from Tooltip.tooltip-surface-bottomThe bubble while it is below the reading. Set alongside tooltip-surface.tooltip-surface-leftThe bubble while it is left of the reading. Set alongside tooltip-surface.tooltip-surface-rightThe bubble while it is right of the reading. Set alongside tooltip-surface.tooltip-surface-topThe bubble while it is above the reading. Set alongside tooltip-surface.tooltip-valueA column's value inside the tooltip.trendOne series' line of best fit, under trend. Carries its series color as --chart-series.x-axisThe values along the horizontal axis, under the plot.x-nameThe name of the horizontal measure.x-tickOne labeled value on the horizontal axis. Each axis has its own tick part, because ::part() cannot tell which axis a tick is on. The one at the far edge carries data-edge="end".y-axisThe values along the vertical axis, beside the plot.y-nameThe name of the vertical measure.y-tickOne labeled value on the vertical axis.
CSS PropertyDescription--chart-point-weightHow large a point is drawn under size-by, from 0 to 1, by area, in steps of a thirty-second. The component writes it on each point, point-ring, and point-active, and the stylesheet that sizes the point reads it.--chart-point-xThe horizontal position of a point-active, as a percentage. The component writes it.--chart-point-yThe vertical position of a point-active, as a percentage from the top. The component writes it.--chart-tickA tick's position along its axis, as a percentage. The component writes it.
Custom stateDescriptionactiveWhile a reading is shown, under the pointer or the keys, with its tooltip open.emptyWhile the empty part stands in the plot.loadingWhile the loading part stands in the plot.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionDenseForty units with overlapping points, where --scatter-chart-point-opacity makes each cluster look darker.PreviewEach page plotted by its weight and load time, with one point per page.PreviewEach page plotted by its weight and load time, with one point per page.Several SeriesTwo latencies against one load, each a series, from one table with three numeric columns.TrendA line of best fit through each series with trend, drawn by least squares.With A LegendA legend beside two series, set with measures so the column measured across has no swatch.