HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Area ChartView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorHow a total is made up over time, as bands stacked on one another.ExperimentalSince 0.1.0ChartsUsageimport'@fusion.dev/helix/area-chart'import'@fusion.dev/helix-headless/area-chart'Preview
API ReferenceRoothelix-area-chartHow a total is made up over time, as bands stacked on one another.
PropTypeDefaultDescriptioncurveCurveHow a band's edge gets from one reading to the next.forstring""The id of the table to read.gridlines"both"|"category"|"value"Which rules are drawn across the plot, if any.labelstring""The drawing's name, for a pointer resting on it.sharebooleanfalseWhether each reading is drawn as a hundred percent.totalLabelstring"Total"What to call the sum of the parts, in the tooltip and the summary.
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.
PartDescriptionareaOne part's band.baselineThe rule at zero, which is the floor of the drawing.gridlineOne rule across the plot, under `gridlines`.guideA rule down the reading a pointer is resting on.labelOne reading's name.labelsThe row of reading names.lineThe top edge of one part's band.markThe invisible point the tooltip is anchored to.plotThe drawing.summaryThe total and the shares at the latest reading, for a reader who cannot see the bands.svgThe drawing surface the bands sit on.tooltipThe bubble, forwarded from `Tooltip`.tooltip-anchorThe `Tooltip` element itself.tooltip-cellOne column's name and value inside the tooltip.tooltip-labelThe reading's own name inside the tooltip.tooltip-nameA column's name inside the tooltip.tooltip-valueA column's value inside the tooltip.
CSS PropertyDescription--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-colorOne rule across the plot, under `gridlines`.--area-chart-widthThickness of a band's top edge.
Roothelix-headless-area-chartHow a total is made up over time, as bands stacked on one another.
PropTypeDefaultDescriptioncurveCurveHow a band's edge gets from one reading to the next.forstring""The id of the table to read.gridlines"both"|"category"|"value"Which rules are drawn across the plot, if any.labelstring""The drawing's name, for a pointer resting on it.sharebooleanfalseWhether each reading is drawn as a hundred percent.totalLabelstring"Total"What to call the sum of the parts, in the tooltip and the summary.
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.
PartDescriptionareaOne part's band.baselineThe rule at zero, which is the floor of the drawing.gridlineOne rule across the plot, under `gridlines`.guideA rule down the reading a pointer is resting on.labelOne reading's name.labelsThe row of reading names.lineThe top edge of one part's band.markThe invisible point the tooltip is anchored to.plotThe drawing.summaryThe total and the shares at the latest reading, for a reader who cannot see the bands.svgThe drawing surface the bands sit on.tooltipThe bubble, forwarded from `Tooltip`.tooltip-anchorThe `Tooltip` element itself.tooltip-cellOne column's name and value inside the tooltip.tooltip-labelThe reading's own name inside the tooltip.tooltip-nameA column's name inside the tooltip.tooltip-valueA column's value inside the tooltip.
ExamplesNameDescriptionPreviewVisits a month by where they came from, each source a band on the one below it.PreviewVisits a month by where they came from, each source a band on the one below it.ShareThe same months as shares, so every reading fills the height and a band is its part of the whole.