Charts

Time Series

Plots values against a UTC time scale with gaps and formats values on axes and tooltips.

idle

Usage

import { TimeSeries } from "@mizen-labs/ui";

A time series with UTC dates and a gap for a missing observation.

Guidance	Practice
Do	Label the series and units. Choose the reporting timezone explicitly and preserve gaps for missing observations.

Guidance	Boundary
Scope	Do not turn missing data into zero. Aggregation intervals and timezone meaning belong to the application.
Scope	Put formatter callbacks in a Client Component. Data and timeZone remain caller-owned.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`points`	`readonly { time: number; value: number \| null }[]`	`Required`	Uses unique integer epoch milliseconds and finite values; null marks a visual gap.
`seriesLabel / aria-label / timeZone`	`string`	`Required`	Names the series, chart, and explicit timezone for displayed dates.
`locale / tone / presentation`	`string / ChartSeriesTone / "chart" \| "sparkline"`	`"en-US" / "series1" / "chart"`	Sets deterministic number and date formatting, series color, and chart density.
`formatValue / formatAxisValue`	`(value: number) => string`	`Locale number formatting`	Formats tooltip values; axis labels use formatAxisValue when supplied, then formatValue, then locale defaults.
`comparison`	`{ label: string; points: TimeSeriesDatum[] }`	`Optional`	Draws a muted dashed reference series, such as last year, on the same scales.
`legend`	`boolean`	`true`	Shows the series legend; set false when a surrounding card renders it.

Charts

Plots values against a UTC time scale with gaps and formats values on axes and tooltips.

idle

import { TimeSeries } from "@mizen-labs/ui";

A time series with UTC dates and a gap for a missing observation.

Guidance	Practice
Do	Label the series and units. Choose the reporting timezone explicitly and preserve gaps for missing observations.

Guidance	Boundary
Scope	Do not turn missing data into zero. Aggregation intervals and timezone meaning belong to the application.
Scope	Put formatter callbacks in a Client Component. Data and timeZone remain caller-owned.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`points`	`readonly { time: number; value: number \| null }[]`	`Required`	Uses unique integer epoch milliseconds and finite values; null marks a visual gap.
`seriesLabel / aria-label / timeZone`	`string`	`Required`	Names the series, chart, and explicit timezone for displayed dates.
`locale / tone / presentation`	`string / ChartSeriesTone / "chart" \| "sparkline"`	`"en-US" / "series1" / "chart"`	Sets deterministic number and date formatting, series color, and chart density.
`formatValue / formatAxisValue`	`(value: number) => string`	`Locale number formatting`	Formats tooltip values; axis labels use formatAxisValue when supplied, then formatValue, then locale defaults.
`comparison`	`{ label: string; points: TimeSeriesDatum[] }`	`Optional`	Draws a muted dashed reference series, such as last year, on the same scales.
`legend`	`boolean`	`true`	Shows the series legend; set false when a surrounding card renders it.