# MeasurementTrendChart

Canonical page: https://docs.ovok.com/native-sdk/guide/components/ui/measurement-trend-chart

`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.

```tsx
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 [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/ui` API reference](/native-sdk/reference/ui).

## `Sparkline` [#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.

```tsx
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.