HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
SparklineView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA line with no axes, for the shape of a series beside the number it belongs to.ExperimentalSince 0.1.0ChartsUsageimport'@fusion.dev/helix/sparkline'import'@fusion.dev/helix-headless/sparkline'Preview
API ReferenceRoothelix-sparklineA line with no axes, for the shape of a series beside the number it belongs to.
PropTypeDefaultDescriptioncurveCurveHow the line gets from one reading to the next.emphasis"outlined"|"solid"|"subtle"How much ink the drawing claims.forstring""The id of a table to read instead, when there is one behind the line.labelstring""What the line says, in a sentence.plot"area"|"bar"|"line"What the readings are drawn as.terminus"none"|"ring"|"square"|"triangle"The shape of the mark on the last reading.valuesstring""The numbers, separated by whitespace or by commas.weight"thick"|"thin"How heavy the line is drawn.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
PartDescriptionareaThe region between the line and the bottom of its range.barOne column, under `plot="bar"`.lineThe path itself.svgThe drawing.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, which is otherwise 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-opacityHow much of the line's color the wash takes where it meets the line.--sparkline-bar-radiusCorner radius on a column, under `plot="bar"`.--sparkline-bar-strokeThickness of a column's edge under `outlined`.--sparkline-block-sizeHeight of the drawing.--sparkline-colorColor of the line, the wash, the columns and the mark.--sparkline-inline-sizeWidth of the drawing.--sparkline-widthThickness of the line, overriding `weight`.
Roothelix-headless-sparklineA line with no axes, for the shape of a series beside the number it belongs to.
PropTypeDefaultDescriptioncurveCurveHow the line gets from one reading to the next.forstring""The id of a table to read instead, when there is one behind the line.labelstring""What the line says, in a sentence.plot"area"|"bar"|"line"What the readings are drawn as.valuesstring""The numbers, separated by whitespace or by commas.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
PartDescriptionareaThe region between the line and the bottom of its range.barOne column, under `plot="bar"`.lineThe path itself.svgThe drawing.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.
ExamplesNameDescriptionCurvesThe same seven readings drawn three ways, and each says something different about what happened between them.EmphasisEach weight against each plot, since a boundary and a fill mean different things per shape.From A TableThe same line taken from a table instead, for the sparkline that has one behind it. The table is clipped and still read.PaletteAll twenty-four series colors on identical readings: eight hues in three tones, as a line and as a wash.PlotsOne series drawn four ways: a line, a wash under it, columns, and a thin line for a row among many.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 ways to end a line. The shapes are shared with every other chart that draws one.