HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
LegendView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA list of the series in a chart, each name beside the color it is drawn in.StableSince 0.1.0ChartsUsageimport'@fusion.dev/helix/legend'import'@fusion.dev/helix-headless/legend'Preview
API ReferenceRoothelix-legendA list of the series in a chart, each name beside the color it is drawn in.
PropTypeDescriptionemphasis"outlined"|"solid"|"subtle"How the swatches are drawn: outlined, subtle, or solid.entries"categories"|"measures"|"series"How the entries are read from the table: series, categories, or
measures.forstringDefault""The id of the table to take the names from.glassstringThe names of the entries whose swatches are drawn as glass.hiddenSeriesstring|readonlystring[]Default""The series hidden on the table, by name, separated by commas: what
toggles hides and shows.labelstringDefault""The name of the list, which a screen reader announces before its entries.material"frosted"|"glass"The material of the swatches: glass or frosted. Unset is opaque.outlinedstringThe names of the entries whose swatches are drawn as an outline.placement"end"|"start"Sets which way the entries run, to suit where you place the legend.subtlestringThe names of the entries whose swatches are drawn as a wash of their color.togglesbooleanDefaultfalseMakes each entry a button that hides or shows its series in every chart
reading the same table.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionchangeEventFired once a toggle has hidden or shown a series.helix-before-changeHelixBeforeChangeEventFired before a toggle hides or shows a series, with the hidden-series it would leave. Cancelable.
PartDescriptionentryOne name and its swatch. Draw the swatch with ::part(entry)::before in your stylesheet. The entry holds its series color as --chart-series, and this tier ships no CSS.entry-hiddenAn entry whose series is hidden. Set alongside entry.listThe list of entries, a toolbar under toggles.nameOne series name.toggleThe button around a name under toggles, which hides or shows its series.
CSS PropertyDescription--legend-colorThe color of the series names.--legend-directionThe direction the entries run: row, which wraps, or column.--legend-entry-gapThe space between a swatch and its name.--legend-font-sizeThe type size of the series names.--legend-gapThe space between entries.--legend-hidden-opacityHow strongly a hidden series' entry is drawn, under toggles.--legend-swatch-radiusThe corner of the color swatch.--legend-swatch-sizeThe size of the color swatch.--legend-swatch-strokeThe width of the edge an outlined or subtle swatch is drawn with.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-legendA list of the series in a chart, each name beside the color it is drawn in.
PropTypeDescriptionentries"categories"|"measures"|"series"How the entries are read from the table: series, categories, or
measures.forstringDefault""The id of the table to take the names from.hiddenSeriesstring|readonlystring[]Default""The series hidden on the table, by name, separated by commas: what
toggles hides and shows.labelstringDefault""The name of the list, which a screen reader announces before its entries.togglesbooleanDefaultfalseMakes each entry a button that hides or shows its series in every chart
reading the same table.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionchangeEventFired once a toggle has hidden or shown a series.helix-before-changeHelixBeforeChangeEventFired before a toggle hides or shows a series, with the hidden-series it would leave. Cancelable.
PartDescriptionentryOne name and its swatch. Draw the swatch with ::part(entry)::before in your stylesheet. The entry holds its series color as --chart-series, and this tier ships no CSS.entry-hiddenAn entry whose series is hidden. Set alongside entry.listThe list of entries, a toolbar under toggles.nameOne series name.toggleThe button around a name under toggles, which hides or shows its series.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionCategoriesA legend with one entry per table row, for a donut chart.EmphasisA legend that matches a bar chart with an outlined Forecast series and a subtle Renewals series.PlacementA legend beside a chart, with its entries in a column. placement sets the direction of the entries, and your layout sets where the legend goes.PreviewA legend with one entry per data column, named by the header row. The table it reads is in the page and visually hidden, the same table a chart reads.PreviewA legend with one entry per data column, named by the header row. The table it reads is in the page and visually hidden, the same table a chart reads.