HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Line ChartView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA chart that draws series over time as lines, read from a table.StableSince 0.1.0ChartsUsageimport'@fusion.dev/helix/line-chart'import'@fusion.dev/helix-headless/line-chart'Preview
API ReferenceRoothelix-line-chartA chart that draws series over time as lines, read from a table.
PropTypeDescriptionareabooleanDefaultfalseDraws a wash under each line, down to the floor of the plot. The washes
overlap and do not add up, so for parts that make a total, use
Area Chart, which stacks them.curve"smooth"|"step"|"straight"How the line gets from one reading to the next.dashedstringDefault""The series drawn as a dashed line, by their headings, separated by
commas: dashed="Forecast, Target".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.emphasis"outlined"|"solid"|"subtle"How strongly the lines and their washes 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.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 %.markersbooleanDefaultfalseDraws a mark on every reading, the marker part, so a reader sees where
the readings are, as well as the line between them.material"frosted"|"glass"How translucent the lines are, as a material: 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.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.terminus"none"|"ring"|"square"|"triangle"The shape of the mark on each series' last reading.valueAxisbooleanDefaultfalseDraws the scale's numbers beside the plot, the axis part, at the levels
gridlines rules, so a reading can be measured off the drawing as well
as read from the tooltip.zerobooleanDefaultfalseWhether the range always includes zero.
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.
PartDescriptionareaThe wash under one line, where area is set.axisThe numbers of the scale beside the plot, under value-axis.bandThe band around the reading under the pointer.baselineThe rule at zero, where zero is inside the range.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 line for one series.line-dashedA line whose series dashed names. Set alongside line.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.markerThe marks on one series' readings under markers, as one path with a stroke of no length at each reading: give it a round stroke-linecap, a stroke-width the size of a mark and vector-effect: non-scaling-stroke. Carries its series color as --chart-series.marker-loneThe marker path of one series' readings with a blank on either side, which no line reaches and which are marked without markers. Set alongside marker.marker-ringThe same marks again under each series' marker paths, to stroke a little wider in the page's color, so a mark reads over the line it sits on.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' latest reading, written as a sentence for screen readers. Hide it visually.svgThe drawing surface the lines and areas 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.terminusThe mark on one series' last reading.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--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 series drawn as a line. Line Chart, Area Chart's top edge, and Bar Chart's lines all read this one property. Each family's own width property overrides it. family, Area Chart's top edge and Bar Chart's lines, since the three read one shared rule. Each family's own width hook overrides it.--chart-terminus-holeFill for the middle of a ring terminus, which is otherwise open. Line Chart and Sparkline share this property.--chart-terminus-sizeSize of the mark on each series' last reading. Line Chart and Sparkline share this property.--chart-terminus-xWhere a series' last reading sits horizontally, as a percentage. Written by the component.--chart-terminus-yWhere a series' last reading sits vertically, as a percentage. Written by the component.--line-chart-area-opacityHow much of a line's color its wash takes.--line-chart-axisThe width of the axis, in ch, set from the widest number on it. Written by the component on the axis.--line-chart-band-colorColor of the band around the reading under the pointer.--line-chart-block-sizeHeight of the drawing.--line-chart-dashThe dash pattern of a series dashed names, as stroke-dasharray takes it.--line-chart-gapSpace between the drawing and its labels.--line-chart-gridline-colorColor of the rules drawn across the plot under gridlines.--line-chart-marker-ring-colorColor of the ring round the mark on a reading, which matches the page. Change it when the chart sits on another surface.--line-chart-marker-sizeSize of the mark on a reading, under markers.--line-chart-widthThickness of a line. Overrides --chart-stroke.
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-line-chartA chart that draws series over time as lines, read from a table.
PropTypeDescriptionareabooleanDefaultfalseDraws a wash under each line, down to the floor of the plot. The washes
overlap and do not add up, so for parts that make a total, use
Area Chart, which stacks them.curve"smooth"|"step"|"straight"How the line gets from one reading to the next.dashedstringDefault""The series drawn as a dashed line, by their headings, separated by
commas: dashed="Forecast, Target".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 %.markersbooleanDefaultfalseDraws a mark on every reading, the marker part, so a reader sees where
the readings are, as well as the line between them.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.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.terminus"none"|"ring"|"square"|"triangle"The shape of the mark on each series' last reading.valueAxisbooleanDefaultfalseDraws the scale's numbers beside the plot, the axis part, at the levels
gridlines rules, so a reading can be measured off the drawing as well
as read from the tooltip.zerobooleanDefaultfalseWhether the range always includes zero.
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.
PartDescriptionareaThe wash under one line, where area is set.axisThe numbers of the scale beside the plot, under value-axis.bandThe band around the reading under the pointer.baselineThe rule at zero, where zero is inside the range.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 line for one series.line-dashedA line whose series dashed names. Set alongside line.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.markerThe marks on one series' readings under markers, as one path with a stroke of no length at each reading: give it a round stroke-linecap, a stroke-width the size of a mark and vector-effect: non-scaling-stroke. Carries its series color as --chart-series.marker-loneThe marker path of one series' readings with a blank on either side, which no line reaches and which are marked without markers. Set alongside marker.marker-ringThe same marks again under each series' marker paths, to stroke a little wider in the page's color, so a mark reads over the line it sits on.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' latest reading, written as a sentence for screen readers. Hide it visually.svgThe drawing surface the lines and areas 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.terminusThe mark on one series' last reading.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--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-terminus-xWhere a series' last reading sits horizontally, as a percentage. Written by the component.--chart-terminus-yWhere a series' last reading sits vertically, as a percentage. Written by the component.--line-chart-axisThe width of the axis, in ch, set from the widest number on it. Written by the component on the axis.
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
NameDescriptionAreaA wash under the line, for one series read as a quantity.CurvesThe three curves over one series: straight, smoothed, and held until the next reading. Smoothed is the default when curve is not set.EmphasisThe same readings at four emphasis levels, from the line carrying the reading to the wash carrying it.From ZeroOpen incidents measured from zero, where the distance from none is what matters. Measured from its own range, a quiet year looks like a collapse.MarkersA dot on every reading with markers, over the line between them.MaterialThe same chart twice, with solid lines and with glass lines over the gridlines.PreviewMonthly sessions, read from the table beside the chart. The cell text is what people see, and data-value holds the number.PreviewMonthly sessions, read from the table beside the chart. The cell text is what people see, and data-value holds the number.Several SeriesTwo series on one scale, with a legend mapping the same palette.StreamingA sliding window of readings: each new reading pushes out the oldest, and the line moves along.Taking New DataThe same chart given different numbers, animating to the new shape.TerminusEach series marked where it ends, in the column where you read the current values.With A TooltipA tooltip on the reading under the pointer, showing the whole row, including a column that is not plotted.With A Value AxisThe scale's numbers beside the plot, at the levels the grid rules, so a reading can be measured off the drawing.With GridlinesRules at evenly spaced levels, so you can read each value against one.