Clinical charts

Example

The heart rate chart shows each convention: the latest reading and its status in the header, the normal range behind the line, events on the timeline, and a footer worked out from the data. Browse the rest on the charts pages.

Foundation

Every chart is a card holding shadcn's chart component, built with Recharts. Series take their color from the --chart-1 to --chart-5 tokens through chartConfig, so the charts follow your theme in light and dark mode. Each one installs as a single file you own and edit.

The readout

A chart about one patient leads with what a monitor shows: the latest value and its unit in the card's header, beside a status badge. The value is read from the data, never typed in, so it stays right when you connect real records.

Ranges and targets

A reading means little without what it's judged against. A normal or target range is a shaded band; a single target, such as an HbA1c of 7%, is a dashed line. Both are muted, so they sit behind the data. Each range is one constant that both the plot and the badge read, so they can't disagree.

// The usual adult resting range, drawn behind the readings.
const normal = { low: 60, high: 100 }
const inRange =
  latest.heartRate >= normal.low && latest.heartRate <= normal.high

<ReferenceArea
  y1={normal.low}
  y2={normal.high}
  fill="var(--muted-foreground)"
  fillOpacity={0.08}
/>

The ranges in the examples are common defaults for adults. Set your own patient's, and check your laboratory's reference ranges, which vary by method and population.

Status

A status pairs an icon with a label, such as “In range” or “Above target”, so it never relies on color. Lab panels mark results H or L, as a lab report does.

<Badge variant="outline">
  {inRange ? <CheckIcon /> : <TriangleAlertIcon />}
  {inRange ? "In range" : "Out of range"}
</Badge>

Events

Marking what happened on the timeline, such as a fever or a dose, lets a change in the readings be read against its cause.

const events = [
  { time: "08:00", label: "Fever" },
  { time: "11:00", label: "Paracetamol" },
]

{events.map((event) => (
  <ReferenceLine key={event.time} x={event.time}>
    <Label value={event.label} position="insideTopLeft" />
  </ReferenceLine>
))}

Footers

Each card ends with a headline and a line of context. The headline is worked out from the data, such as the peak, the change since the first reading or the subgroups below a threshold, with a trend icon where the data has a direction.

Clinical forms

Where medicine has its own chart, OrganUI uses it rather than a generic one:

• Glucose profile: the median with percentile bands over a day.
• Ambulatory blood pressure as range bars, with the overnight dip.
• Time in range and a lab panel with each result on its range.
• Kaplan–Meier curves and a forest plot for research.

Data

The examples hold fictional patients and illustrative figures, and say so in their footers. They show how data is laid out; they are not clinical guidance, and scores such as NEWS2 should be checked against the chart your organisation uses.