Chart
Clinical data visualizations using Recharts. Charts use the design system color palette, theme-aware colors, and evidence-based clinical visualization patterns.
Basic Lab Trend
The default chart style for any lab value or vital sign. Clean line, horizontal gridlines, and an area fill. No reference ranges — use this when ranges aren't clinically meaningful or when showing a general trend.
6-month trend
178 mg/dL
↓ 10% · ImprovingReference Range Bands
Colored background zones communicate normal, borderline, and abnormal ranges instantly — more effective than reference lines alone. Bands use very low opacity so the data line remains the visual focus.
6-month trend with clinical range zones
5.2
↓ 28% · NormalSparklines
Compact inline charts for multi-lab panel overviews. Each sparkline shows the trend with a subtle reference range band. Best for metabolic panels, CBC results, or any at-a-glance multi-metric view.
Disease-Specific Charts
Most lab values and vitals use the basic trend or reference range band patterns above. For conditions where published clinical guidelines define specific staging, targets, or visualization best practices, we implement disease-specific charts with features like KDIGO staging bands, medication timelines, and clinically meaningful thresholds.
When to use disease-specific charts: Only when a condition has evidence-based visualization patterns — e.g. KDIGO staging for CKD, ADA targets for diabetes, ACC/AHA thresholds for hypertension. All other values default to basic trend or reference range bands.
Diabetes — HbA1c Trend
12-month glycemic control
7.2%
↓ 21% · Above TargetMedications
CKD — eGFR Staging
2-year eGFR with KDIGO staging
38 mL/min
↓ 44% · Stage G3bHypertension — Blood Pressure
Medication therapy intensification over 5 months
122/76
↓ 20% · At GoalMedications
Design Principles
Charts should embody clarity over decoration. Follow these principles:
Data-Ink Ratio
Maximize data, minimize chrome. Every pixel should communicate information.
Clinical Range Bands
Use subtle background color zones to encode clinical meaning. Pre-attentive color processing lets users see normal/abnormal instantly without reading labels.
Subtle Grid
Horizontal gridlines only, dashed, theme-aware opacity. No vertical gridlines.
Medication Timeline
Align medication changes below the chart on the same time axis. Lets clinicians connect treatment changes to outcome trends at a glance.
Line & Point Specifications
Avoid
- 3D effects, bevels, or drop shadows on chart elements
- Bold gradients on bars (subtle area fills with opacity fade are acceptable)
- Decorative patterns or textures
- Animations beyond subtle transitions
Chart Colors
Use the design system palette for consistent data visualization.
Chart 1
Primary data
Chart 2
Warning/threshold
Chart 3
Critical/alert
Chart 4
Info/reference
Chart 5
Positive/target