TimeSeries
Progressively enhances a deterministic time-series fallback with a responsive themed uPlot canvas and native data alternative.@gemologic/sheen-charts · dataPlayground
This example has no scalar controls. Its validated source remains interactive below.
Use Left and Right Arrow, Home, and End to inspect samples. Press Escape to clear the inspection.
View as table
Latency declined; one p99 sample is missing.
| Time | p50 | p99 |
|---|---|---|
| Jan 1, 2024, 12:00:00 AM | 18 ms | 42 ms |
| Jan 1, 2024, 12:01:00 AM | 16 ms | Missing value |
| Jan 1, 2024, 12:02:00 AM | 15 ms | 34 ms |
<TimeSeries label="API latency" summary="Latency declined; one p99 sample is missing." xLabel="Time" series={latencySeries} data={latencyData} x={{ type: "time", tz: "UTC" }} y={{ format: "duration" }} height={220} legend="inline" />Variant matrix
API latencyAPI latencyLatency declined; one p99 sample is missing.
Use Left and Right Arrow, Home, and End to inspect samples. Press Escape to clear the inspection.
View as table
Latency declined; one p99 sample is missing.
| Time | p50 | p99 |
|---|---|---|
| Jan 1, 2024, 12:00:00 AM | 18 ms | 42 ms |
| Jan 1, 2024, 12:01:00 AM | 16 ms | Missing value |
| Jan 1, 2024, 12:02:00 AM | 15 ms | 34 ms |
Anatomy
- Package
@gemologic/sheen-charts- Source
packages/charts/src/TimeSeries.tsx- Tokens
--sheen-chart-1--sheen-chart-2--sheen-chart-3--sheen-chart-4--sheen-chart-5--sheen-chart-6--sheen-chart-7--sheen-chart-8--sheen-chart-grid--sheen-chart-axis--sheen-chart-crosshair--sheen-chart-line-width--sheen-color-fg--sheen-color-fg-muted
Accessibility
Role: labeled figure with an image description and native table disclosureKeyboard: Focus the plot and use Left/Right, Home/End, and Escape to inspect samples., Use the native view-as-table disclosure for complete keyboard access to every sample., Use legend buttons and zoom controls when those interactions are enabled.Do
- Keep series identities stable and retain accepted data while a refresh is pending.
- Use UTC epoch milliseconds and NaN for gaps, then provide an interpretive summary.
- Use explicit non-color encodings when palette colors repeat or color alone cannot carry the distinction.
Do not
- Do not hide the native table alternative or pass Date/string timestamps.
- Do not key the chart by data revision, theme, or size.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
x * | import("./chart-types.ts").ChartTimeAxis | — | Time formatting configuration; timezone changes presentation only. |
cursor | import("./chart-types.ts").ChartCursorOptions | — | Optional named cursor-sync group. |
onZoom | (range: readonly [number, number] | null) => void | — | Receives the accepted x range after drag zoom and null after reset. |
__unsafe_uplot | import("./chart-types.ts").TimeSeriesUPlotOptions | — | Explicit typed escape hatch for uPlot options not owned by the Sheen lifecycle. |
label * | string | — | Required visible and accessible chart name. |
summary * | string | — | Required narrative interpretation used alongside the visual and table alternative. |
xLabel * | string | — | Required time-axis label and native table heading. |
series * | readonly ChartSeries[] | — | Stable validated series definitions with semantic color tokens and optional solid, dashed, dotted, or dash-dot non-color encoding. |
data * | ChartData | — | Equal-length Float64 columns using UTC epoch milliseconds and NaN gaps. |
y | import("./chart-types.ts").ChartValueAxis | — | Shared value formatting and optional zero baseline. |
height * | number | — | Positive finite reserved plot height in CSS pixels. |
legend | import("./chart-types.ts").ChartLegend | inline | Legend presentation; false hides it. |
tooltip | boolean | true | Whether single-tab-stop pointer and keyboard crosshair inspection is enabled. |
annotations | readonly ChartAnnotation[] | — | Optional labeled events at UTC epoch-millisecond positions. |
empty | JSX.Element | — | Optional retained empty-state content for a zero-row dataset. |
loading | boolean | false | Marks accepted chart and table content busy without replacing either. |
table | import("./chart-types.ts").ChartTableOptions | — | Native table page size and disclosure label; the alternative cannot be disabled. |
class | string | — | Optional class appended to the figure root. |