HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Bar ChartView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA chart that draws a table's categories as columns.StableSince 0.1.0ChartsUsageimport'@fusion.dev/helix/bar-chart'import'@fusion.dev/helix-headless/bar-chart'Preview
API ReferenceRoothelix-bar-chartA chart that draws a table's categories as columns.
PropTypeDescriptiondataChartDataThe 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.emphasis"outlined"|"solid"|"subtle"How strongly the columns are drawn.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.glassstringThe names of the series drawn in glass.gridlines"both"|"category"|"value"Which gridlines are drawn across the plot, if any.highestLabelstringDefault"Highest"The name the summary gives each series' highest reading, {highestLabel}
in summary-label.labelstringDefault""The chart's name, which starts the chart's text summary.linesstringThe names of the series to draw as lines. The other series are drawn as
columns.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 %.material"frosted"|"glass"The material the columns are drawn in. Leave it unset for solid columns, or
set glass or frosted.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.orientation"horizontal"Where the categories run. Leave it unset for categories along the bottom,
or set horizontal to run them down the side.outlinedstringThe names of the series drawn as an outline.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.secondarystringThe names of the series measured against a second scale of their own.stackedbooleanDefaultfalseStacks a category's columns into one, each series standing on the ones
before it, so the column's height is the category's total.subtlestringThe names of the series drawn as a wash of their color.summaryLabelstringDefault"{highestLabel}: {readings}."The summary's sentence. {highestLabel} is highest-label, and
{readings} each series' highest reading: the series, the category and
the reading as the table writes it.valueAxisbooleanDefaultfalseDraws the numbers of the scale the bars are measured on, the axis part,
at the levels gridlines rules: down the side of columns, and along the
bottom of bars under orientation="horizontal".wash"gradient"How a column's fill is distributed across it.
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.
PartDescriptionaxisThe numbers of one scale: the primary under value-axis, and both when secondary splits the chart into two scales.bandThe category band under the pointer.barOne column. Under stacked, one segment of a category's column. Past one column a pixel, a path of the columns of one series that share a data-tone and a side of zero, each a rectangle in it.bar-endThe bar at a column's far end, the end away from zero, which is the end to round. A column standing alone is its own far end. Under stacked, the last positive segment above zero and the last negative one below it. Its data-end is positive or negative. A blank or a zero is never the end. Set together with bar, and never on a path of columns.bar-end-negativeA far end below zero, whose far end is its bottom, or its inline start when the bars run across. Set together with bar-end.bar-negativeA bar below zero, standing alone or any segment of a stack below it, whose base is its top, or its inline end when the bars run across. On a path of columns, every column in it is below zero. Set together with bar.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 line the columns stand on.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 gridline across the plot, drawn when gridlines is set.groupOne category's columns, together. Past one column a pixel, every category's columns, together.group-activeThe group the tooltip describes. Set together with group. Past one column a pixel, that category's columns drawn again over the rest, each at least two pixels thick.labelOne category's name, placed along the row by --chart-label-start and --chart-label-size, or down the column under orientation="horizontal", with its text centered. Only the names that fit are drawn, the first and the last always.labelsThe row of category names, or the column of them under orientation="horizontal", which the names share: lay it out as one grid cell they all stand in.lineA series drawn as a line, named in lines.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 chart's name and each series' highest reading, written as a sentence for screen readers. Hide it visually.svgThe drawing surface the bars and lines 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 an axis.tooltip-anchorThe Tooltip element itself.tooltip-arrowThe tooltip's arrow, forwarded from Tooltip.tooltip-arrow-bottomThe arrow while the bubble is below the reading, on the bubble's top edge. Set together with tooltip-arrow.tooltip-arrow-leftThe arrow while the bubble is left of the reading, on the bubble's right edge. Set together with tooltip-arrow.tooltip-arrow-rightThe arrow while the bubble is right of the reading, on the bubble's left edge. Set together with tooltip-arrow.tooltip-arrow-topThe arrow while the bubble is above the reading, on the bubble's bottom edge. Set together with tooltip-arrow.tooltip-cellOne column's name and value inside the tooltip.tooltip-cell-currentThe cell the series keys rest on, while they rest there. Set alongside tooltip-cell.tooltip-labelThe reading's category name inside the tooltip.tooltip-nameA column's name inside the tooltip.tooltip-surfaceThe tooltip bubble, forwarded from Tooltip.tooltip-surface-bottomThe bubble while it is below the reading. Set together with tooltip-surface.tooltip-surface-leftThe bubble while it is left of the reading. Set together with tooltip-surface.tooltip-surface-rightThe bubble while it is right of the reading. Set together with tooltip-surface.tooltip-surface-topThe bubble while it is above the reading. Set together with tooltip-surface.tooltip-valueA column's value inside the tooltip.
CSS PropertyDescription--bar-chart-axisThe width of an axis, in ch, set from the widest number on it. The chart sets it on the axis itself, and only when the categories run along the bottom. In a horizontal chart the axis is a row, one line high.--bar-chart-band-colorFill of the category band under the pointer.--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-colorColor of the gridlines drawn by gridlines.--bar-chart-line-colorColor of a lines series. Overrides its series color.--bar-chart-line-widthThickness of a lines series. Overrides --chart-stroke.--bar-chart-secondaryThe color of the secondary axis, when one series is on it. The chart sets it from that series' --chart-series-* property, so the axis is drawn in whatever color that property resolves to.--bar-chart-tone-accentThe color of a bar whose cell says data-tone="accent".--bar-chart-tone-dangerThe color of a bar whose cell says data-tone="danger".--bar-chart-tone-infoThe color of a bar whose cell says data-tone="info".--bar-chart-tone-mutedThe color of a bar whose cell says data-tone="muted".--bar-chart-tone-primaryThe color of a bar whose cell says data-tone="primary". A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define.--bar-chart-tone-successThe color of a bar whose cell says data-tone="success".--bar-chart-tone-warningThe color of a bar whose cell says data-tone="warning".--chart-bar-washThe gradient for a bar, named per bar so the styled tier can use it as the fill. It is always drawn, and used only when wash="gradient" is set.--chart-label-sizeHow much of the row a category's name has room for, as a percentage, or of the column under orientation="horizontal". Written by the component on each label.--chart-label-startWhere a category name's room starts along the row, as a percentage from the inline start, or down the column from the top under orientation="horizontal". Written by the component on each label.--chart-strokeThickness of a lines series. Bar Chart, Line Chart, and the top edge of Area Chart share this property. --bar-chart-line-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-bar-chartA chart that draws a table's categories as columns.
PropTypeDescriptiondataChartDataThe 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 gridlines are drawn across the plot, if any.highestLabelstringDefault"Highest"The name the summary gives each series' highest reading, {highestLabel}
in summary-label.labelstringDefault""The chart's name, which starts the chart's text summary.linesstringThe names of the series to draw as lines. The other series are drawn as
columns.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.orientation"horizontal"Where the categories run. Leave it unset for categories along the bottom,
or set horizontal to run them down the side.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.secondarystringThe names of the series measured against a second scale of their own.stackedbooleanDefaultfalseStacks a category's columns into one, each series standing on the ones
before it, so the column's height is the category's total.summaryLabelstringDefault"{highestLabel}: {readings}."The summary's sentence. {highestLabel} is highest-label, and
{readings} each series' highest reading: the series, the category and
the reading as the table writes it.valueAxisbooleanDefaultfalseDraws the numbers of the scale the bars are measured on, the axis part,
at the levels gridlines rules: down the side of columns, and along the
bottom of bars under orientation="horizontal".
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.
PartDescriptionaxisThe numbers of one scale: the primary under value-axis, and both when secondary splits the chart into two scales.bandThe category band under the pointer.barOne column. Under stacked, one segment of a category's column. Past one column a pixel, a path of the columns of one series that share a data-tone and a side of zero, each a rectangle in it.bar-endThe bar at a column's far end, the end away from zero, which is the end to round. A column standing alone is its own far end. Under stacked, the last positive segment above zero and the last negative one below it. Its data-end is positive or negative. A blank or a zero is never the end. Set together with bar, and never on a path of columns.bar-end-negativeA far end below zero, whose far end is its bottom, or its inline start when the bars run across. Set together with bar-end.bar-negativeA bar below zero, standing alone or any segment of a stack below it, whose base is its top, or its inline end when the bars run across. On a path of columns, every column in it is below zero. Set together with bar.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 line the columns stand on.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 gridline across the plot, drawn when gridlines is set.groupOne category's columns, together. Past one column a pixel, every category's columns, together.group-activeThe group the tooltip describes. Set together with group. Past one column a pixel, that category's columns drawn again over the rest, each at least two pixels thick.labelOne category's name, placed along the row by --chart-label-start and --chart-label-size, or down the column under orientation="horizontal", with its text centered. Only the names that fit are drawn, the first and the last always.labelsThe row of category names, or the column of them under orientation="horizontal", which the names share: lay it out as one grid cell they all stand in.lineA series drawn as a line, named in lines.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 chart's name and each series' highest reading, written as a sentence for screen readers. Hide it visually.svgThe drawing surface the bars and lines 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 an axis.tooltip-anchorThe Tooltip element itself.tooltip-arrowThe tooltip's arrow, forwarded from Tooltip.tooltip-arrow-bottomThe arrow while the bubble is below the reading, on the bubble's top edge. Set together with tooltip-arrow.tooltip-arrow-leftThe arrow while the bubble is left of the reading, on the bubble's right edge. Set together with tooltip-arrow.tooltip-arrow-rightThe arrow while the bubble is right of the reading, on the bubble's left edge. Set together with tooltip-arrow.tooltip-arrow-topThe arrow while the bubble is above the reading, on the bubble's bottom edge. Set together with tooltip-arrow.tooltip-cellOne column's name and value inside the tooltip.tooltip-cell-currentThe cell the series keys rest on, while they rest there. Set alongside tooltip-cell.tooltip-labelThe reading's category name inside the tooltip.tooltip-nameA column's name inside the tooltip.tooltip-surfaceThe tooltip bubble, forwarded from Tooltip.tooltip-surface-bottomThe bubble while it is below the reading. Set together with tooltip-surface.tooltip-surface-leftThe bubble while it is left of the reading. Set together with tooltip-surface.tooltip-surface-rightThe bubble while it is right of the reading. Set together with tooltip-surface.tooltip-surface-topThe bubble while it is above the reading. Set together with tooltip-surface.tooltip-valueA column's value inside the tooltip.
CSS PropertyDescription--bar-chart-axisThe width of an axis, in ch, set from the widest number on it. The chart sets it on the axis itself, and only when the categories run along the bottom. In a horizontal chart the axis is a row, one line high.--bar-chart-secondaryThe color of the secondary axis, when one series is on it. The chart sets it from that series' --chart-series-* property, so the axis is drawn in whatever color that property resolves to.--bar-chart-tone-accentThe color of a bar whose cell says data-tone="accent".--bar-chart-tone-dangerThe color of a bar whose cell says data-tone="danger".--bar-chart-tone-infoThe color of a bar whose cell says data-tone="info".--bar-chart-tone-mutedThe color of a bar whose cell says data-tone="muted".--bar-chart-tone-primaryThe color of a bar whose cell says data-tone="primary". A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define.--bar-chart-tone-successThe color of a bar whose cell says data-tone="success".--bar-chart-tone-warningThe color of a bar whose cell says data-tone="warning".--chart-bar-washThe gradient for a bar, named per bar so the styled tier can use it as the fill. It is always drawn, and used only when wash="gradient" is set.--chart-label-sizeHow much of the row a category's name has room for, as a percentage, or of the column under orientation="horizontal". Written by the component on each label.--chart-label-startWhere a category name's room starts along the row, as a percentage from the inline start, or down the column from the top under orientation="horizontal". 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
NameDescriptionGlass And GradientThe same columns in glass and in gradient, over a background that shows the difference.GroupedThree series over the same categories, each in the next series color, with a legend built from the same table.HorizontalCategories down the side, for long labels such as names, which would overlap or turn sideways in a row.OutlinedColumns outlined in their own color, for a dense chart or a busy background.Outlined SeriesOne series drawn as an outline, for a target shown among measured values.PreviewRevenue by quarter, drawn from a table whose cells show text and hold the plotted number in data-value, then signups by channel stacked into one column a quarter, and a net figure that goes below zero, outlined.PreviewRevenue by quarter, drawn from a table whose cells show text and hold the plotted number in data-value, then signups by channel stacked into one column a quarter, and a net figure that goes below zero, outlined.StackedThree series stacked with stacked, so each column is the total for its week.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 tooltip that shows the whole row under the pointer, including a column the chart does not plot.With A Value AxisThe numbers of the scale the columns are measured on, beside the plot, with one scale.With GridlinesGridlines on both axes of a horizontal chart.