Service uptime heatmaps for status and reliability
Turn ninety days of service health into a compact status strip that keeps outages visible.
- Operational
- Degraded
- Partial outage
- Full outage
- Not monitored
- Rows
- Service
- Columns
- Observed day
- Value
- Operational status
The pattern
What the data tells you
Narrow status strips keep the full history in view. The key distinguishes degraded service, outages, and missing monitoring.
Operational heatmaps are categorical: healthy, degraded, partial outage, and outage are states, not evenly spaced numbers. Paint each cell directly and reserve unknown for days before monitoring began.
A service heatmap makes a fleet comparable in one screen. It helps an on-call engineer see whether a problem was isolated, recurring, or spread across several services without opening every incident detail page.
Build it in React
From data to heatmap
Prepare your data
One service per row and one observed day per column. Use a direct cell colour function when the values represent statuses.
Make the component yours
Start with this example. Adjust the labels, colours, and tooltips to fit your product.
import { Heatmap } from "@thilakbhat/heatmap-ui";
import "@thilakbhat/heatmap-ui/styles.css";
// Daily uptime per service, as a percentage. null = not monitored yet.
type Uptime = (number | null)[][];
const statusColour = (value: number) =>
value >= 99.9 ? "#3fb68b" : value >= 99 ? "#f2b53c" : value >= 95 ? "#ef8a3c" : "#e5534b";
export function ServiceUptime({ services, uptime }: { services: string[]; uptime: Uptime }) {
return (
<Heatmap
rows={services.length}
columns={90}
values={uptime}
cellWidth={5}
cellHeight={16}
gap={2}
rowLabels={services}
cellColor={(cell) => (cell.known ? statusColour(cell.value) : undefined)}
unknownOpacity={0.35}
tooltip={(cell) => (cell.known ? `${cell.value}% uptime` : "Not monitored")}
ariaLabel="Service uptime by day"
/>
);
}A few more details
Common questions
Service uptime heatmaps, explained.
What is a service uptime heatmap?
A service uptime heatmap places services on rows and observed days or intervals on columns, giving an operations team a compact view of reliability across a fleet.
How should a heatmap represent healthy, degraded, and outage states?
Treat uptime states as categories rather than evenly spaced numbers. Use a direct cell colour function for healthy, degraded, partial outage, and outage states so the legend matches the operational meaning.
How do I show days before monitoring started?
Represent pre-monitoring or unavailable observations as unknown rather than zero uptime. This prevents a missing measurement from being interpreted as an outage.
Can an uptime heatmap support SLA review dashboards?
Yes. Use one row per service, add the observation window and unit in the surrounding UI, and pair the heatmap with incident details or SLA calculations when readers need to investigate a cell.