A multi-series uPlot chart with unioned timestamps, same-unit scales, padded ranges, live token resolution, tooltip, threshold lines, and resilient states.
Multiple seriesTooltipThresholdsLoadingEmptyError
Response time
Response timemsRequests/s
<TimeSeriesChart title="Response time" {series} thresholds={limits} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { TimeSeriesChart } from '@chanrg/4ui';<TimeSeriesChart title="Response time" {series} thresholds={limits} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | TimeSeries[] | [] | Normalized timestamp/value series. |
height | number | 260 | Plot height. |
variant | line | area | area | Trace fill treatment. |
thresholds | ChartThreshold[] | [] | Horizontal threshold references. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Legend labels identify each series without depending on color.
- Empty and error states remain textual.
- Tooltip rows include series label, value, and unit.