HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Bar ChartView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorCategories as columns, read from a table.ExperimentalSince 0.1.0ChartsUsageimport'@fusion.dev/helix/bar-chart'import'@fusion.dev/helix-headless/bar-chart'Preview
API ReferenceRoothelix-bar-chartCategories as columns, read from a table.
PropTypeDefaultDescriptiondirection"horizontal"Whether the categories run down the side rather than along the bottom.emphasis"outlined"|"solid"|"subtle"How much ink the columns claim.forstring""The id of the table to read.glassstringWhich series are glass rather than solid, by name.gridlines"both"|"category"|"value"Which rules are drawn across the plot, if any.labelstring""The drawing's name, for a pointer resting on it.linesstringWhich series are drawn as a line instead of as columns, by name.material"frosted"|"glass"What the columns are made of.outlinedstringWhich series are drawn as an outline rather than a fill, by name.secondarystringWhich series are measured against a scale of their own, by name.subtlestringWhich series are drawn as a wash of their color, by name.wash"gradient"How a column's fill is distributed across it.
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.
PartDescriptionaxisOne scale's numbers, drawn only when `secondary` splits them.bandThe slot the pointer is resting in.barOne column.bar-wash-endThe far stop of a bar's gradient, where one is used.bar-wash-startThe stop of a bar's gradient at its base.baselineThe rule the columns stand on.gridlineOne rule across the plot, under `gridlines`.groupOne category's columns, together.labelOne category's name.labelsThe row of category names.lineA series drawn as a line rather than as columns, under `lines`.markThe invisible point the tooltip is anchored to.plotThe drawing.svgThe drawing surface the bars and lines sit on.tickOne number on an axis.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--bar-chart-axisThe color of a single-series axis, taken from that series.--bar-chart-band-colorThe slot the pointer is resting in.--bar-chart-bar-radiusCorner radius at the far end of a column.--bar-chart-bar-strokeWidth of the edge an `outlined` or `subtle` column is drawn with.--bar-chart-block-sizeHeight of the drawing.--bar-chart-gapSpace between the drawing and its labels.--bar-chart-gridline-colorOne rule across the plot, under `gridlines`.--bar-chart-line-colorA `lines` series, overriding its series color.--bar-chart-line-widthThickness of a `lines` series.--bar-chart-secondaryThe color of the secondary axis when one series owns it. It resolves a `--helix-color-series-*` token, so on the headless tier alone it names something that is not there. #138.--chart-bar-washThe gradient a bar would take, named per bar so the styled tier can point `fill` at it. Drawn whatever the treatment and used only where `wash="gradient"` asks for it.
Roothelix-headless-bar-chartCategories as columns, read from a table.
PropTypeDefaultDescriptiondirection"horizontal"Whether the categories run down the side rather than along the bottom.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.linesstringWhich series are drawn as a line instead of as columns, by name.secondarystringWhich series are measured against a scale of their own, by name.
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.
PartDescriptionaxisOne scale's numbers, drawn only when `secondary` splits them.bandThe slot the pointer is resting in.barOne column.bar-wash-endThe far stop of a bar's gradient, where one is used.bar-wash-startThe stop of a bar's gradient at its base.baselineThe rule the columns stand on.gridlineOne rule across the plot, under `gridlines`.groupOne category's columns, together.labelOne category's name.labelsThe row of category names.lineA series drawn as a line rather than as columns, under `lines`.markThe invisible point the tooltip is anchored to.plotThe drawing.svgThe drawing surface the bars and lines sit on.tickOne number on an axis.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--bar-chart-axisThe color of a single-series axis, taken from that series.--bar-chart-secondaryThe color of the secondary axis when one series owns it. It resolves a `--helix-color-series-*` token, so on the headless tier alone it names something that is not there. #138.--chart-bar-washThe gradient a bar would take, named per bar so the styled tier can point `fill` at it. Drawn whatever the treatment and used only where `wash="gradient"` asks for it.
ExamplesNameDescriptionEmphasisColumns drawn with an edge of their own color, for a dense chart or a busy ground.GroupedThree series over the same categories, each taking the next series color, with a legend reading the same table.HorizontalCategories down the side, which is what names rather than dates need: a row of long labels either overlaps or turns on its side.MaterialThe same columns as glass and as gradient, over a ground that shows the difference.Per SeriesOne series outlined among the measured ones, for a target that is not a measurement.PreviewRevenue by quarter, read from the table beside it. The cell text is what a reader sees and data-value is the number.PreviewRevenue by quarter, read from the table beside it. The cell text is what a reader sees and data-value is the number.With A LineTwo series as columns and a third as a line, all measured against one axis.With A Second AxisA count and a percentage, each on its own scale, both scales labeled.With A TooltipA pointer resting on a reading, showing the whole row including a column nothing plotted.With GridlinesRules across the measured axis, which turns with the direction the columns run.