`MeasurementTrendChart`

MeasurementTrendChart renders one or more numeric series as SVG polylines. It can also show a normal-value band and dashed threshold lines. The component is a presentation primitive: it does not label axes, format units, infer dates, or make clinical decisions.

import {
  MeasurementTrendChart,
  type MeasurementReading,
} from "@ovok/native/ui";

const readings: MeasurementReading[] = [
  { at: Date.parse("2026-01-01"), values: [120, 80] },
  { at: Date.parse("2026-01-02"), values: [118, 78] },
];

<MeasurementTrendChart
  readings={readings}
  normalRange={[70, 130]}
  thresholds={[90]}
/>;

Props

Prop	Type	Default	Description
`readings`	`readonly MeasurementReading[]`	required	Ordered readings to plot
`normalRange`	`readonly [number, number]`	—	Filled band between the lower and upper values
`thresholds`	`readonly number[]`	`[]`	Horizontal dashed threshold lines
`width`	`number`	`320`	SVG and empty-state width
`height`	`number`	`160`	SVG and empty-state height
`testID`	`string`	—	Test identifier on the outer view
`theme`	`OvokThemeOverride`	—	Optional theme override
`slots`	`Partial<OvokUiSlots>`	—	Optional Paper primitive replacements

interface MeasurementReading {
  at: number;
  values: number[];
}

at is used as a numeric x-axis coordinate. When every reading has the same at, the component spaces points evenly by array index. Each position in values is a series; missing positions are skipped for that reading.

`Sparkline`

Sparkline is the same chart with compact defaults: width defaults to 160 and height defaults to 48. Passing either prop overrides its compact default.

import { Sparkline } from "@ovok/native/ui";

<Sparkline readings={readings} />;

If readings and all optional domain values are empty, the component renders an empty view with the requested dimensions. Values are scaled to the supplied chart box; the chart does not clamp outliers or validate measurement units.

Props​

Sparkline​

Props

`Sparkline`