HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Area ChartView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA chart that shows how a total is made up over time, as bands stacked on one another.StableSince 0.1.0ChartsUsageimport'@fusion.dev/helix/area-chart'import'@fusion.dev/helix-headless/area-chart'Preview
API ReferenceRoothelix-area-chartA chart that shows how a total is made up over time, as bands stacked on one another.
PropTypeDescriptioncurve"smooth"|"step"|"straight"How a band's edge gets from one reading to the next.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"|"category"|"value"Which rules 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.overlapbooleanDefaultfalseDraws every band from zero, in front of the next, so a band's height is
its own part's amount and not its place in a stack.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.sharebooleanDefaultfalseDraws each reading as a hundred percent, so each band shows its share of
the total.summaryLabelstringDefault"{reading}: {totalLabel} {total}; {shares}."The summary's sentence. {reading} is the latest reading's name,
{totalLabel} the name for the sum, {total} the sum, written in the
locale, and {shares} each part's share, listed as the locale lists.totalLabelstringDefault"Total"The name for the sum of the parts, shown in the tooltip and the summary.valueAxisbooleanDefaultfalseDraws the scale's numbers beside the plot, the axis part, at the levels
gridlines rules: amounts, or percentages under share.
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.
PartDescriptionareaOne part's band.axisThe numbers of the scale beside the plot, under value-axis.baselineThe rule at zero, which is the floor of the drawing.emptyThe 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 rule across the plot, under gridlines.guideA rule down the reading a pointer is resting on.labelOne reading's name, placed along the row by --chart-label-start and --chart-label-size with its text centered. Only the names that fit are drawn, the first and the last always.labelsThe row of reading names, which the names share: lay it out as one grid cell they all stand in.lineThe top edge of one part's band.liveThe readout: a polite live region that says the reading 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.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.summaryThe total and each part's share at the latest reading, written as a sentence for screen readers.svgThe drawing surface the bands 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.tickOne number on the axis, placed with inset-block-start at its level.tooltip-anchorThe Tooltip element itself.tooltip-arrowThe bubble's point, forwarded from Tooltip.tooltip-arrow-bottomThe point while the bubble is below the reading, so on its top edge, beside tooltip-arrow.tooltip-arrow-leftThe point while the bubble is left of the reading, so on its right edge, beside tooltip-arrow.tooltip-arrow-rightThe point while the bubble is right of the reading, so on its left edge, beside tooltip-arrow.tooltip-arrow-topThe point while the bubble is above the reading, so on its bottom edge, beside 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 reading'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, beside tooltip-surface.tooltip-surface-leftThe bubble while it is left of the reading, beside tooltip-surface.tooltip-surface-rightThe bubble while it is right of the reading, beside tooltip-surface.tooltip-surface-topThe bubble while it is above the reading, beside tooltip-surface.tooltip-valueA column's value inside the tooltip.
CSS PropertyDescription--area-chart-axisThe width of the axis, in ch, set from the widest number on it. Written by the component on the axis.--area-chart-block-sizeHeight of the drawing.--area-chart-fill-strengthHow much of its series' color a band takes, as a percentage mixed toward the page.--area-chart-gapSpace between the drawing and its labels.--area-chart-gridline-colorColor of the rules drawn across the plot under gridlines.--area-chart-overlap-opacityHow much of each band shows under overlap, where the bands in front let the ones behind show through.--area-chart-widthThickness of a band's top edge. Overrides --chart-stroke.--chart-label-sizeHow much of the row a reading's name has room for, as a percentage. Written by the component on each label.--chart-label-startWhere a reading name's room starts along the row, as a percentage from the inline start. Written by the component on each label.--chart-strokeThickness of a band's top edge. Area Chart, Line Chart, and Bar Chart's lines all read this one property. --area-chart-width overrides it here.
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-area-chartA chart that shows how a total is made up over time, as bands stacked on one another.
PropTypeDescriptioncurve"smooth"|"step"|"straight"How a band's edge gets from one reading to the next.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"|"category"|"value"Which rules 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.overlapbooleanDefaultfalseDraws every band from zero, in front of the next, so a band's height is
its own part's amount and not its place in a stack.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.sharebooleanDefaultfalseDraws each reading as a hundred percent, so each band shows its share of
the total.summaryLabelstringDefault"{reading}: {totalLabel} {total}; {shares}."The summary's sentence. {reading} is the latest reading's name,
{totalLabel} the name for the sum, {total} the sum, written in the
locale, and {shares} each part's share, listed as the locale lists.totalLabelstringDefault"Total"The name for the sum of the parts, shown in the tooltip and the summary.valueAxisbooleanDefaultfalseDraws the scale's numbers beside the plot, the axis part, at the levels
gridlines rules: amounts, or percentages under share.
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.
PartDescriptionareaOne part's band.axisThe numbers of the scale beside the plot, under value-axis.baselineThe rule at zero, which is the floor of the drawing.emptyThe 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 rule across the plot, under gridlines.guideA rule down the reading a pointer is resting on.labelOne reading's name, placed along the row by --chart-label-start and --chart-label-size with its text centered. Only the names that fit are drawn, the first and the last always.labelsThe row of reading names, which the names share: lay it out as one grid cell they all stand in.lineThe top edge of one part's band.liveThe readout: a polite live region that says the reading 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.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.summaryThe total and each part's share at the latest reading, written as a sentence for screen readers.svgThe drawing surface the bands 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.tickOne number on the axis, placed with inset-block-start at its level.tooltip-anchorThe Tooltip element itself.tooltip-arrowThe bubble's point, forwarded from Tooltip.tooltip-arrow-bottomThe point while the bubble is below the reading, so on its top edge, beside tooltip-arrow.tooltip-arrow-leftThe point while the bubble is left of the reading, so on its right edge, beside tooltip-arrow.tooltip-arrow-rightThe point while the bubble is right of the reading, so on its left edge, beside tooltip-arrow.tooltip-arrow-topThe point while the bubble is above the reading, so on its bottom edge, beside 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 reading'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, beside tooltip-surface.tooltip-surface-leftThe bubble while it is left of the reading, beside tooltip-surface.tooltip-surface-rightThe bubble while it is right of the reading, beside tooltip-surface.tooltip-surface-topThe bubble while it is above the reading, beside tooltip-surface.tooltip-valueA column's value inside the tooltip.
CSS PropertyDescription--area-chart-axisThe width of the axis, in ch, set from the widest number on it. Written by the component on the axis.--chart-label-sizeHow much of the row a reading's name has room for, as a percentage. Written by the component on each label.--chart-label-startWhere a reading name's room starts along the row, as a percentage from the inline start. Written by the component on each label.
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
NameDescriptionCurvesThe three curves over one stack: straight, smoothed, and held until the next reading. Straight is the default when curve is not set.OverlapThe same months with every band drawn from zero, so each source is compared with the others by its own height.PreviewMonthly visits by source, with each source stacked as a band on the one below it.PreviewMonthly visits by source, with each source stacked as a band on the one below it.ShareThe same months drawn as shares, so every reading fills the height and each band shows its part of the total.With A LegendA legend beside the bands, naming them in the order they are stacked and in the colors they are drawn.With A TooltipA tooltip on the reading under the pointer, showing every part and the sum, named by total-label.With A Value AxisEach part's share with the percentages beside the plot, so a band can be measured off the drawing.With GridlinesRules at the levels the total reaches, drawn over the bands.