HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
LegendView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorThe names a chart draws, each beside the color it is drawn in.ExperimentalSince 0.1.0ChartsUsageimport'@fusion.dev/helix/legend'import'@fusion.dev/helix-headless/legend'Preview
API ReferenceRoothelix-legendThe names a chart draws, each beside the color it is drawn in.
PropTypeDefaultDescriptionemphasis"outlined"|"solid"|"subtle"How much ink the swatches claim.entries"categories"|"series"Which way to read the table.forstring""The id of the table to take the names from.glassstringWhich entries are glass rather than solid, by name.material"frosted"|"glass"What the swatches are made of.outlinedstringWhich entries are drawn as an outline rather than a fill, by name.placement"end"|"start"Where the legend sits and which way its entries run.subtlestringWhich entries are drawn as a wash of their color, by name.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
PartDescriptionentryOne name and its swatch.listThe list itself.nameOne series name.swatchThe color a series is drawn in.
CSS PropertyDescription--legend-direction`row`, which wraps, or `column`.--legend-gapSpace between entries.--legend-swatch-sizeSize of the color patch.--legend-swatch-strokeWidth of the edge an `outlined` or `subtle` swatch is drawn with.
Roothelix-headless-legendThe names a chart draws, each beside the color it is drawn in.
PropTypeDefaultDescriptionentries"categories"|"series"Which way to read the table.forstring""The id of the table to take the names from.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
PartDescriptionentryOne name and its swatch.listThe list itself.nameOne series name.swatchThe color a series is drawn in.
ExamplesNameDescriptionCategoriesThe same element reading rows instead of columns, which is what a donut needs and a bar chart does not.EmphasisA key drawn to match a chart whose forecast series is outlined.PlacementA legend beside a chart rather than under it. The element says which way its entries run; the consumer still says where it goes.PreviewOne entry per data column, named by the header row. The table is in the page and clipped, which is where a chart reads it from.PreviewOne entry per data column, named by the header row. The table is in the page and clipped, which is where a chart reads it from.