HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Donut ChartView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorParts of a whole as a ring, read from a table.ExperimentalSince 0.1.0ChartsUsageimport'@fusion.dev/helix/donut-chart'import'@fusion.dev/helix-headless/donut-chart'Preview
API ReferenceRoothelix-donut-chartParts of a whole as a ring, read from a table.
PropTypeDefaultDescriptionemphasis"outlined"|"solid"|"subtle"How much ink the slices claim.forstring""The id of the table to read.hole"large"|"none"|"small"How much is left open in the middle.labelstring""The drawing's name, for a pointer resting on it.material"frosted"|"glass"What the ring is made of.sweep"half"How much of the circle the whole occupies.
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.
SlotDescription(default)Goes in the middle of the ring. A total, usually.
PartDescriptioncenterThe middle of the ring, holding whatever is slotted.markThe invisible point the tooltip is anchored to.plotThe drawing.segmentOne slice.segment-edgeOne slice as a closed shape, for a boundary to trace.tooltipThe bubble, forwarded from `Tooltip`.tooltip-anchorThe `Tooltip` element itself.tooltip-cellOne column's name and value inside the tooltip.tooltip-labelThe slice's own name inside the tooltip.tooltip-nameA column's name inside the tooltip.tooltip-valueA column's value inside the tooltip.trackThe ring the slices are drawn on.
CSS PropertyDescription--donut-chart-edge-strokeThickness of the slice boundary under `outlined`.--donut-chart-sizeWidth and height of the ring.--donut-chart-strokeHow thick the ring is drawn, derived from `hole`.--donut-chart-track-colorColor of the ring under the slices.
Roothelix-headless-donut-chartParts of a whole as a ring, read from a table.
PropTypeDefaultDescriptionforstring""The id of the table to read.hole"large"|"none"|"small"How much is left open in the middle.labelstring""The drawing's name, for a pointer resting on it.sweep"half"How much of the circle the whole occupies.
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.
SlotDescription(default)Goes in the middle of the ring. A total, usually.
PartDescriptioncenterThe middle of the ring, holding whatever is slotted.markThe invisible point the tooltip is anchored to.plotThe drawing.segmentOne slice.segment-edgeOne slice as a closed shape, for a boundary to trace.tooltipThe bubble, forwarded from `Tooltip`.tooltip-anchorThe `Tooltip` element itself.tooltip-cellOne column's name and value inside the tooltip.tooltip-labelThe slice's own name inside the tooltip.tooltip-nameA column's name inside the tooltip.tooltip-valueA column's value inside the tooltip.trackThe ring the slices are drawn on.
CSS PropertyDescription--donut-chart-strokeHow thick the ring is drawn, derived from `hole`.
ExamplesNameDescriptionArcThe same shares over a half circle, with the total in the opening.EmphasisThe three weights a ring can carry, from full strength to a wash.MaterialThe same ring opaque and as glass, over a ground that shows the difference.PieThe hole closed, which is a pie: the same drawing with its ring spanning the whole radius.PreviewSessions by source as a ring, read from the table beside it.PreviewSessions by source as a ring, read from the table beside it.ThinA lighter ring, for a card where the shares matter less than the total.With A LegendA legend beside the ring, mapping the same palette in the same order.With A TooltipA pointer resting on a slice, showing the whole row including a column nothing plotted.With A TotalA total in the hole, which is what the middle of a ring is for.