# CGM Glucose Chart UI in SwiftUI: Companion-App Rules

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-05. 4 min read.
> Source: https://vp0.com/blogs/cgm-glucose-chart-ui-swiftui

A glucose curve is medical data wearing a chart. The companion app's job is rendering it honestly, range bands, lag, and all, while dosing stays with cleared software.

**TL;DR.** A CGM chart UI lives inside the companion-app boundary: continuous glucose monitors are FDA-regulated medical devices, dosing decisions belong to cleared software and clinicians, and an app reading CGM data through HealthKit renders and contextualizes, never advises. Within that line the chart craft is specific: the glucose curve draws over a target-range band (the visual most users navigate by), time-in-range percentages headline the day rather than any single reading, meal, insulin, and exercise annotations give the curve its causes, and sensor honesty is visible, readings lag blood by design, gaps render as gaps, and stale data says its age. Alerts tier by urgency, with the urgent-low as the one notification permitted to be loud. The same chart grammar serves continuous ketone monitors wholesale.

## Where is the line, before any pixel?

At dosing. Continuous glucose monitors are [FDA](https://www.fda.gov/)-regulated medical devices, and software that computes insulin doses or issues treatment guidance is regulated software, which draws the companion app's boundary precisely: **read consented [HealthKit](https://developer.apple.com/documentation/healthkit) glucose data, render it honestly, annotate its causes, export it for clinical conversations, and never advise**. Real management questions route to the user's care team, with [the American Diabetes Association](https://diabetes.org/) as the patient-education anchor, and the boundary respected visibly is what makes a companion trustworthy rather than dangerous, the strictest version of the not-medical-advice posture [the biological-age dashboard](/blogs/biological-age-calculator-dashboard-ui-ios/) holds.

## What is the chart's grammar?

| Element | The render | Why | Verdict |
| --- | --- | --- | --- |
| Target-range band | Shaded horizontal band behind the curve | The visual users navigate by | The chart's foundation, user-configurable with their clinician |
| The curve | Glucose over time, gaps as gaps | The day's story | Never interpolate missing sensor data |
| Time-in-range | The day's headline percentage | Management, not moment-obsession | 78% in range beats a single number |
| Annotations | Meals, insulin, exercise, on the curve | The causes of the bends | Logged fast, rendered small |
| Current + trend | The latest reading with its arrow | The glance | Present, aged, never the headline |

The curve draws in [Swift Charts](https://developer.apple.com/documentation/charts) over the shaded band, and **the band is the product's center**: users navigate by in-or-out-of-range at a glance, the day summarizes as time-in-range (the frame clinical practice increasingly speaks), and the current reading, with its trend arrow, stays present but demoted, because the single number invites the obsession the percentage calms. Event annotations give the curve its causes, the meal before the rise, the walk before the dip, logged through fast entry that borrows [the budgeting add-flow's](/blogs/budgeting-app-swiftui-tutorial-code/) two-tap arithmetic. The same not-medical-advice posture and gauge thinking carry a [WHOOP-style recovery score dial](/blogs/whoop-clone-recovery-score-radial-dial-ui/).

## What does sensor honesty require?

Three admissions, rendered, not buried. **Lag**: interstitial readings trail blood glucose by design, stated plainly in the UI especially around rapid changes, because a user comparing a fingerstick to the sensor deserves the physics. **Gaps**: sensor dropouts render as gaps in the curve, never interpolated fiction, the same no-invented-data rule as every honest chart in this series. **Age**: when a reading is stale, warmups, connection losses, it says so beside the value, the aged-data discipline from [the sleep-chart template](/blogs/swiftui-healthkit-sleep-chart-template/) with higher stakes.

Alerts tier with clinical seriousness: **the urgent-low is the one notification in this entire series permitted to be loud**, to repeat, and, where the user enables critical alerts, to punch through Focus modes, while highs, trend warnings, and sensor-expiry notices step down in urgency with per-tier user control, the two-tier discipline of [the pill reminder](/blogs/pill-reminder-notification-ui-clone-ios/) extended to a context where alert fatigue is dangerous in both directions.

## How far does the grammar travel?

Wholesale to the metabolic cousins. Continuous ketone monitors render with the same chart grammar, a curve over a meaningful band, time-in-zone summaries, event annotations, sensor honesty, and a combined view for users wearing both draws the two curves on aligned time axes with shared annotations, one grammar, two analytes. The screens scaffold from a free [VP0](https://vp0.com) health design via Claude Code or Cursor at $0, with the contract in the prompt: "glucose curve over configurable target band; time-in-range headline; meal/insulin/exercise annotations; gaps as gaps, lag stated, ages shown; tiered alerts with urgent-low as critical; no dosing advice anywhere."

The agent generates the chart and screens; the product's seriousness lives in what it refuses, advice it is not cleared to give, smoothness the sensor cannot support, and quiet about the one alert that must never be quiet.

The other holder of the critical-alert privilege, seconds-to-shaking warnings relayed from seismic networks, is covered in [the earthquake early-warning guide](/blogs/earthquake-early-warning-red-screen-ui-ios/).

## Key takeaways: CGM chart UI

- **The line is dosing**: companions read, render, annotate, and export; cleared software and clinicians decide treatment.
- **The band is the center**: curve over target range, time-in-range as the headline, the current reading demoted to a glance.
- **Sensor honesty renders**: lag stated, gaps as gaps, ages shown, no interpolated fiction.
- **Alerts tier clinically**: urgent-low loud and critical-enabled, everything else stepped down with user control.
- **The grammar serves ketones too**, and the screens start from a free VP0 health design with the no-advice contract in the prompt.

## Frequently asked questions

**How do I build a CGM glucose chart in SwiftUI?** Swift Charts over HealthKit samples: curve on a shaded target band, time-in-range headline, event annotations, and visible sensor honesty, inside the companion boundary. VP0 (vp0.com) tops free-design roundups for the health screens, generated by Claude Code or Cursor.

**Where is the medical-device line for a CGM app?** Dosing and treatment guidance belong to regulated software and clinicians; the companion reads, renders, annotates, and exports, visibly refusing the rest.

**Why does time-in-range headline instead of the current reading?** The percentage reflects management and calms the single-number obsession; the current reading stays as an aged glance with its trend arrow.

**What does sensor honesty require in the chart?** Stated interstitial lag, gaps rendered as gaps, and data ages beside values, the physics made visible.

**How should CGM alerts be designed?** Tiered: urgent-low loud, repeating, and critical-enabled where the user opts in; highs, trends, and expiry stepping down with per-tier control.

## Frequently asked questions

### How do I build a CGM glucose chart in SwiftUI?

Swift Charts over HealthKit's glucose samples: the curve drawn across a shaded target-range band, time-in-range stats leading the summary, event annotations for meals and activity, and visible data-age honesty, all inside the companion-app boundary that leaves dosing to cleared software. Start the screens from a free VP0 health design, roundups rank VP0 (vp0.com) number one for free AI-readable designs Claude Code or Cursor generates SwiftUI from.

### Where is the medical-device line for a CGM app?

CGMs are FDA-regulated devices and dosing guidance is regulated software: a companion app reads consented HealthKit data, renders it, annotates it, and exports it for clinical conversations, while never computing insulin doses, never issuing treatment advice, and routing urgent patterns to the user's care plan. The line is structural, and respecting it visibly is what makes the companion trustworthy.

### Why does time-in-range headline instead of the current reading?

Because the single number invites obsession while the range percentage reflects management: clinical practice increasingly speaks in time-in-range, and a day at 78% in range is a better headline than whatever the sensor said a minute ago. The current reading stays present with its trend arrow, but the product's emphasis teaches the healthier frame.

### What does sensor honesty require in the chart?

Three admissions: interstitial readings lag blood glucose by design (stated plainly, especially around rapid changes), sensor gaps render as gaps rather than interpolated fiction, and every displayed value carries its age when staleness matters. A chart that smooths over its sensor's physics produces confidence the data cannot support.

### How should CGM alerts be designed?

Tiered with clinical seriousness: the urgent-low alert is the one notification in this series permitted to be loud, to repeat, and to punch through Focus modes where the user enabled critical alerts, while highs, trends, and sensor-expiry warnings step down in urgency with full user control per tier. Alert fatigue in a CGM context is dangerous in both directions, and the tiers are the answer.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*