HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
SparklineView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA small chart with no axes that shows the shape of a series beside its number.StableSince 0.1.0ChartsUsageimport'@fusion.dev/helix/sparkline'import'@fusion.dev/helix-headless/sparkline'Preview
API ReferenceRoothelix-sparklineA small chart with no axes that shows the shape of a series beside its number.
PropTypeDescriptioncurve"smooth"|"step"|"straight"How the line is drawn from one reading to the next.emphasis"outlined"|"solid"|"subtle"How strongly the line, area, or columns are drawn.forstringDefault""The id of a table to read the readings from, when a table holds the data.labelstringDefault""A sentence that describes what the line shows.localestringDefault""The locale the words, the readout's numbers and positions are in, such
as de for 1.240.marksstringDefault""Which readings take a mark of their own: high, low, or both,
separated by spaces.overviewLabelstringDefault"From {first} to {last}, highest {high}, lowest {low}"What the readings come to, said after the name: {first} and {last}
for the first and the last reading, {high} and {low} for the highest
and the lowest, each written as the readout writes it.plot"area"|"bar"|"line"What the readings are drawn as.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.rangestringDefault""Two values a band is drawn between, behind the line, separated by a
space: range="60 100" marks a normal range.terminus"none"|"ring"|"square"|"triangle"The shape of the mark on the last reading.valuesstring|readonlynumber[]Default""The numbers, separated by whitespace or by commas.weight"thick"|"thin"How thick the line is drawn.
ReadTypeDescriptionnamedstringThe drawing's name: an aria-label written on the sparkline, then label.readingsnumberHow many readings there are, which the pointer and the keys walk.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionhelix-reading-changeHelixReadingChangeEventThe reading shown moved, or was put away: index is the reading, or -1 for none, with its row's label from a table 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.
PartDescriptionareaThe region between the line and the bottom of its range.barOne column, drawn when plot="bar".cursorThe mark on the reading a pointer or a key rests on, rendered only while there is one. Placed with inset-inline-start and inset-block-start.highThe mark on the highest reading, under marks="high". Placed as cursor is.lineThe line's path.liveA polite region that says the reading a key moved to, rendered only with a label. Hide it visually.loneThe mark on a reading no line reaches, with a blank or an end on each side. Placed as cursor is.lowThe mark on the lowest reading, under marks="low". Placed as cursor is.overviewWhat the readings come to, in overview-label, which describes the drawing. Rendered hidden with a name, since it is read through the description and not shown.rangeThe band between the two values of range, drawn behind the line.readoutThe reading a pointer or a key rests on, as the table or values writes it, rendered only while there is one. Placed as cursor is.svgThe drawing, which takes focus to be read by key where there is a label.terminusThe mark on the last value.wash-endThe far stop of the area's gradient.wash-startThe stop of the area's gradient that meets the line.
CSS PropertyDescription--chart-terminus-holeA fill for the middle of a ring terminus. Without it, the middle is open.--chart-terminus-sizeSize of the mark on the last reading.--chart-terminus-xWhere the last point sits horizontally, as a percentage.--chart-terminus-yWhere the last point sits vertically, as a percentage.--sparkline-area-opacityOpacity of the area fill where it meets the line.--sparkline-bar-radiusCorner radius of a column, when plot="bar".--sparkline-bar-strokeThickness of a column's edge when emphasis is outlined.--sparkline-block-sizeHeight of the drawing.--sparkline-colorColor of the line, the area fill, the columns, and the mark.--sparkline-inline-sizeWidth of the drawing.--sparkline-mark-colorColor of the dot on the reading a pointer or a key rests on, and of the marks dots. Without it, the line's color.--sparkline-mark-ring-colorColor of the ring round the dot on the reading a pointer or a key rests on, which matches the page. Change it when the sparkline sits on another surface.--sparkline-mark-sizeSize of the dot on the reading a pointer or a key rests on, and of the marks dots.--sparkline-range-colorFill of the band range draws. Without it, the line's color.--sparkline-range-opacityOpacity of the band range draws.--sparkline-readout-background-colorGround of the reading written above the dot.--sparkline-readout-colorColor of the reading written above the dot.--sparkline-readout-font-sizeSize of the reading written above the dot.--sparkline-widthThickness of the line, overriding weight.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-sparklineA small chart with no axes that shows the shape of a series beside its number.
PropTypeDescriptioncurve"smooth"|"step"|"straight"How the line is drawn from one reading to the next.forstringDefault""The id of a table to read the readings from, when a table holds the data.labelstringDefault""A sentence that describes what the line shows.localestringDefault""The locale the words, the readout's numbers and positions are in, such
as de for 1.240.marksstringDefault""Which readings take a mark of their own: high, low, or both,
separated by spaces.overviewLabelstringDefault"From {first} to {last}, highest {high}, lowest {low}"What the readings come to, said after the name: {first} and {last}
for the first and the last reading, {high} and {low} for the highest
and the lowest, each written as the readout writes it.plot"area"|"bar"|"line"What the readings are drawn as.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.rangestringDefault""Two values a band is drawn between, behind the line, separated by a
space: range="60 100" marks a normal range.valuesstring|readonlynumber[]Default""The numbers, separated by whitespace or by commas.
ReadTypeDescriptionnamedstringThe drawing's name: an aria-label written on the sparkline, then label.readingsnumberHow many readings there are, which the pointer and the keys walk.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionhelix-reading-changeHelixReadingChangeEventThe reading shown moved, or was put away: index is the reading, or -1 for none, with its row's label from a table 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.
PartDescriptionareaThe region between the line and the bottom of its range.barOne column, drawn when plot="bar".cursorThe mark on the reading a pointer or a key rests on, rendered only while there is one. Placed with inset-inline-start and inset-block-start.highThe mark on the highest reading, under marks="high". Placed as cursor is.lineThe line's path.liveA polite region that says the reading a key moved to, rendered only with a label. Hide it visually.loneThe mark on a reading no line reaches, with a blank or an end on each side. Placed as cursor is.lowThe mark on the lowest reading, under marks="low". Placed as cursor is.overviewWhat the readings come to, in overview-label, which describes the drawing. Rendered hidden with a name, since it is read through the description and not shown.rangeThe band between the two values of range, drawn behind the line.readoutThe reading a pointer or a key rests on, as the table or values writes it, rendered only while there is one. Placed as cursor is.svgThe drawing, which takes focus to be read by key where there is a label.terminusThe mark on the last value.wash-endThe far stop of the area's gradient.wash-startThe stop of the area's gradient that meets the line.
CSS PropertyDescription--chart-terminus-xWhere the last point sits horizontally, as a percentage.--chart-terminus-yWhere the last point sits vertically, as a percentage.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionCurvesThe same seven readings drawn with three curves, each showing the values between readings differently.EmphasisEmphasis values on a line, an area, and bars, because an outline and a fill look different on each shape.From A TableThe same line read from a table, which is visually hidden and still read by screen readers.PaletteAll twenty-four series colors, eight hues in three tones, on identical readings as a line and as an area.Plots And WeightsOne series drawn as an area, a line, and columns, and as a thin and a thick line.PreviewThe same seven days as bars, as a line, and as an area.PreviewThe same seven days as bars, as a line, and as an area.TerminiFive shapes for the end of a line, shared with every chart that draws a line.