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]}
/>;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/ui API reference.

SparklineCopy Anchor Link

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.