HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Scatter ChartView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorWhether two measures move together, one point per row.ExperimentalSince 0.1.0ChartsUsageimport'@fusion.dev/helix/scatter-chart'import'@fusion.dev/helix-headless/scatter-chart'Preview
API ReferenceRoothelix-scatter-chartWhether two measures move together, one point per row.
PropTypeDefaultDescriptioncorrelationLabelstring"correlation"What to call the strength of the relation in the summary.forstring""The id of the table to read.gridlines"both"|"x"|"y"Which rules are drawn across the plot, if any.labelstring""The drawing's name, for a pointer resting on it.pointsLabelstring"points"What to call a row in the summary, which counts them.
ReadTypeDescriptionnamedstringWhat to call the drawing, the consumer's word or the table's own.pointerWhich reading a pointer is nearest, for a tooltip to sit on.readingsnumberHow many readings there are, which is what the pointer maps onto.seriesSeries[]The columns of the table, one series each, or none if there is no table.sourceRowsRow[]Every row of the table, with each cell's text as well as its number.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
PartDescriptiongridlineOne rule across the plot, under `gridlines`.markThe invisible point the tooltip is anchored to.plotThe drawing.pointOne row, as a point.summaryHow strongly the measures relate, for a reader who cannot see the points.svgThe drawing surface the rules sit on.tooltipThe bubble, forwarded from `Tooltip`.tooltip-anchorThe `Tooltip` element itself.tooltip-cellOne column's name and value inside the tooltip.tooltip-labelThe row's own name inside the tooltip.tooltip-nameA column's name inside the tooltip.tooltip-valueA column's value inside the tooltip.x-axisThe levels measured across, under the plot.x-nameWhat is measured across.x-tickOne labeled level across. A part of its own rather than a shared `tick`, because `::part()` cannot tell which axis a tick is on.y-axisThe levels measured up, beside the plot.y-nameWhat is measured up.y-tickOne labeled level up.
CSS PropertyDescription--chart-point-xWhere a point sits across, as a percentage. Written by the component.--chart-point-yWhere a point sits up, as a percentage from the top. Written by the component.--chart-tickWhere a tick sits along its axis, as a percentage. Written by the component.--scatter-chart-block-sizeHeight of the drawing.--scatter-chart-gapSpace between the drawing and its axes.--scatter-chart-gridline-colorOne rule across the plot, under `gridlines`.--scatter-chart-point-opacityHow much of its color a point shows, so a cluster reads darker where it is denser.--scatter-chart-point-ring-colorThe ring around each point, which is the page's color unless the chart sits on something else.--scatter-chart-point-sizeDiameter of a point.
Roothelix-headless-scatter-chartWhether two measures move together, one point per row.
PropTypeDefaultDescriptioncorrelationLabelstring"correlation"What to call the strength of the relation in the summary.forstring""The id of the table to read.gridlines"both"|"x"|"y"Which rules are drawn across the plot, if any.labelstring""The drawing's name, for a pointer resting on it.pointsLabelstring"points"What to call a row in the summary, which counts them.
ReadTypeDescriptionnamedstringWhat to call the drawing, the consumer's word or the table's own.pointerWhich reading a pointer is nearest, for a tooltip to sit on.readingsnumberHow many readings there are, which is what the pointer maps onto.seriesSeries[]The columns of the table, one series each, or none if there is no table.sourceRowsRow[]Every row of the table, with each cell's text as well as its number.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
PartDescriptiongridlineOne rule across the plot, under `gridlines`.markThe invisible point the tooltip is anchored to.plotThe drawing.pointOne row, as a point.summaryHow strongly the measures relate, for a reader who cannot see the points.svgThe drawing surface the rules sit on.tooltipThe bubble, forwarded from `Tooltip`.tooltip-anchorThe `Tooltip` element itself.tooltip-cellOne column's name and value inside the tooltip.tooltip-labelThe row's own name inside the tooltip.tooltip-nameA column's name inside the tooltip.tooltip-valueA column's value inside the tooltip.x-axisThe levels measured across, under the plot.x-nameWhat is measured across.x-tickOne labeled level across. A part of its own rather than a shared `tick`, because `::part()` cannot tell which axis a tick is on.y-axisThe levels measured up, beside the plot.y-nameWhat is measured up.y-tickOne labeled level up.
CSS PropertyDescription--chart-point-xWhere a point sits across, as a percentage. Written by the component.--chart-point-yWhere a point sits up, as a percentage from the top. Written by the component.--chart-tickWhere a tick sits along its axis, as a percentage. Written by the component.
ExamplesNameDescriptionPreviewEvery page by its weight and how long it takes to load, one point a page.PreviewEvery page by its weight and how long it takes to load, one point a page.Several SeriesTwo latencies against one load, each a series, from one table with three numeric columns.