Chart System Guide

SentinelGrid ships 14 chart wrappers built on Recharts. Every chart reads theme tokens via the useChartTheme() hook, so colors, gridlines, axes, and tooltips automatically adapt to dark/light mode.

Overview

Charts live in components/charts/. Each chart is a thin wrapper around a Recharts primitive plus the shared ChartContainer, which provides the card chrome, header, fullscreen dialog, and PNG export button.

export function LatencyChart({ data, title, description }: LatencyChartProps) {
  const t = useChartTheme();
  return (
    <ChartContainer title={title} description={description}>
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={data}>
          <CartesianGrid stroke={t.grid} vertical={false} />
          <XAxis dataKey="timestamp" stroke={t.axis} fontSize={11} />
          <YAxis stroke={t.axis} fontSize={11} />
          <Tooltip content={<ChartTooltip suffix="ms" />} />
          <Area dataKey="p99" stroke={t.palette[2]} />
        </AreaChart>
      </ResponsiveContainer>
    </ChartContainer>
  );
}

Available Charts

When to Use Each

• Use Area charts for cumulative trends like latency or volume — the gradient fill communicates magnitude.
• Use Bar charts for discrete comparisons (deployments per day, compliance per service).
• Use Line charts for trends where the gradient fill would be noise (burn rate, MTTR).
• Use Donut charts for parts-of-whole distributions with 4 or fewer segments.
• Use Horizontal bar charts for top-N rankings with long labels (service names).
• Use Radial gauges for single KPIs with a target (SLO compliance, saturation).
• Use Heatmaps for calendar-style availability over a long window.

Theme Tokens

The useChartTheme() hook returns an object with everything a chart needs: an 8-color palette, grid color, axis color, and tooltip styling. Colors swap automatically when the theme changes.

const t = useChartTheme();
// {
//   isDark: boolean,
//   grid: "rgba(255,255,255,0.06)",
//   axis: "rgba(255,255,255,0.45)",
//   tooltipBg: "#13151B",
//   tooltipBorder: "rgba(255,255,255,0.08)",
//   tooltipText: "#F1F5F9",
//   palette: ["#22D3EE", "#A78BFA", "#FCD34D", "#34D399", "#F87171", "#FB923C", "#60A5FA", "#94A3B8"]
// }

Custom Tooltips

The ChartTooltip component handles the most common case: a label plus key/value rows with a colored dot. Pass a suffix for unit-aware formatting, or a formatter for fully custom rendering.

<Tooltip content={<ChartTooltip suffix="ms" />} />

<Tooltip content={
  <ChartTooltip formatter={(value, name) => `${name}: ${Number(value).toFixed(1)}%`} />
} />

Fullscreen Mode & Export

Every chart renders inside a ChartContainer that adds two action buttons in the top-right: a fullscreen toggle (opens the chart in a Dialog at 80% viewport height) and a PNG export button.

<UptimeHeatmap data={data} fullscreen={false} />

Live Examples

Below are four chart wrappers rendering real mock data. Try the fullscreen and export buttons — they work out of the box.