TimeseriesChart

Basic Usage

data is an array of series; each series' data holds time-ordered [timestamp_ms, value] tuples. color is optional — series fall onto the categorical palette by position, and positions are stable, so hiding one series never recolors the rest. Hovering opens the tooltip: rows sort by value descending, duplicate names dedupe, and values resolve by binary-searching the nearest sample.

Two-series lines

Loading demo...

Markers & Thresholds

markers draw vertical dashed lines on the time axis; markers that crowd together cluster into one line based on the visible span, the label becomes "N changes" (clusterLabel overrides the wording), and hovering the line lists each marker's label and description. thresholds draw horizontal lines on the value axis, and the y domain extends automatically to cover them.

Deploy markers + SLO line

Loading demo...

Gradient & Incomplete Data

gradient adds a vertical fill under each line (series color at 40% → transparent). incomplete declares data outside [before, after] as incomplete: edge segments render dashed and overlap the solid segment by one sample so the line stays connected.

Gradient + dashed edges

Loading demo...

Stacked Bars

With type="bar" every series stacks automatically (kumo's stack: 'total'), and the y domain covers each timestamp's stacked total.

Daily stacks

Loading demo...

Time Range Selection

Attaching a time-range-change listener enables horizontal brushing: drag on the plot to draw a selection; releasing emits (from, to) in milliseconds and clears the selection. Drags under 3px count as clicks and do nothing.

Drag to select

Loading demo...

Legend Interplay

v-model:hidden-series two-way binds the hidden series names: hidden series neither render nor appear in tooltips. highlighted-series emphasizes one series and dims the rest to 30% opacity. Combine both with TxChartLegendItem for a clickable, hover-highlighting legend.

Prop	Type	Default	Description
`data`	`TimeseriesData[]`	—	`{ name, data: [ts, value][], color? }`; missing `color` falls onto the categorical palette by position.
`type`	`'line' \| 'bar'`	`'line'`	Bars stack automatically.
`markers`	`TimeseriesMarker[]`	—	`{ timestamp, label?, description?, color?, lineStyle? }`.
`thresholds`	`TimeseriesThreshold[]`	—	`{ value, label?, color }`; the y domain extends to cover them.
`xAxisName` / `yAxisName`	`string`	—	Axis names.
`xAxisTickCount` / `yAxisTickCount`	`number`	`5`	Suggested tick counts.
`xAxisTickFormat` / `yAxisTickFormat`	`(v: number) => string`	—	Tick formatters.
`tooltipValueFormat`	`(v: number) => string`	raw value	Tooltip value formatter.
`tooltipMode`	`'all' \| 'single'`	`'all'`	`single` shows only the series closest to the cursor's y value.
`tooltipMaxItems`	`number`	`10`	Overflow folds into "+N more".
`tooltipFollowCursor`	`'both' \| 'x'`	`'both'`	`x` pins the vertical position to avoid jitter.
`incomplete`	`{ before?, after? }`	—	Incomplete periods (line type only).
`gradient`	`boolean`	`false`	Gradient fill under lines.
`loading`	`boolean`	`false`	Skeleton state.
`highlightedSeries`	`string \| null`	—	Emphasized series; the rest dim to 30% opacity.
`height`	`number`	`350`	Pixel height.
`width`	`number`	measured	Explicit width (SSR/tests).
`ariaDescription`	`string`	—	Accessible description (svg `role="img"`).
`clusterLabel`	`(n: number) => string`	n => `${n} changes`	Cluster label wording.
`timestampFormat`	`(ts: number) => string`	compact locale	Tooltip timestamp format.