Spotlight Chart

Fill-width metric tabs that swap a Plot underneath — KPI strip plus time-series.

Default

Each tab owns its label, pre-formatted value, delta and series. formatValue receives the series id, so one formatter can handle counts, rates and durations.

Time series. Use Left and Right arrows to inspect values, Home and End for range edges, and Escape to clear.

import { SpotlightChart } from "@smallest-inc/ui";

const DAY = 86_400;
const END = Date.UTC(2026, 8, 28) / 1000;

/** Daily values for the last 14 days, oldest first. */
const CONNECTED = [1053, 742, 758, 1095, 1108, 1088, 1192, 1201, 821, 829, 1147, 1251, 1155, 1141];
const UNANSWERED = [307, 207, 214, 279, 280, 289, 307, 315, 191, 209, 298, 314, 318, 286];
const FAILED = [87, 46, 50, 72, 78, 75, 65, 66, 58, 65, 71, 71, 98, 88];
const CONNECT_RATE = [83, 82, 85, 85, 87, 84, 87, 87, 89, 88, 88, 89, 87, 89];
const DURATION = [210, 210, 218, 215, 221, 224, 221, 217, 230, 215, 220, 227, 230, 225];

const daily = (values: number[]) =>
  values.map((value, index) => ({ time: END - (values.length - 1 - index) * DAY, value }));

function formatValue(value: number, seriesId?: string) {
  if (seriesId === "rate") return `${Math.round(value)}%`;
  if (seriesId === "duration") return `${Math.floor(value / 60)}m ${Math.round(value % 60)}s`;
  return Math.round(value).toLocaleString("en-US");
}

export default function SpotlightChartDefault() {
  return (
    <SpotlightChart
      axes="x"
      legend="values"
      formatValue={formatValue}
      formatLegendValue={formatValue}
      domain={{ domain: { start: END - 13 * DAY, end: END } }}
      tabs={[
        {
          id: "calls",
          label: "Total calls",
          value: "19,385",
          delta: 10,
          series: [
            { id: "connected", label: "Connected", color: "#3B82F6", data: daily(CONNECTED) },
            { id: "unanswered", label: "Unanswered", color: "#8B5CF6", data: daily(UNANSWERED) },
            { id: "failed", label: "Failed", color: "#EF4444", data: daily(FAILED) },
          ],
        },
        {
          id: "rate",
          label: "Connect rate",
          value: "86%",
          delta: 4,
          series: [{ id: "rate", label: "Connect rate", color: "#10B981", data: daily(CONNECT_RATE) }],
        },
        {
          id: "duration",
          label: "Avg. duration",
          value: "3m 40s",
          delta: 5,
          series: [{ id: "duration", label: "Avg. duration", color: "#F59E0B", data: daily(DURATION) }],
        },
        {
          id: "failed",
          label: "Failed calls",
          value: "990",
          delta: -12,
          improvementDirection: "lower",
          series: [{ id: "failed", label: "Failed", color: "#EF4444", data: daily(FAILED) }],
        },
      ]}
    />
  );
}

Lower is better

Set improvementDirection to lower for metrics where down is good. The delta pill turns green when the number falls and red when it rises.

Time series. Use Left and Right arrows to inspect values, Home and End for range edges, and Escape to clear.

import { SpotlightChart } from "@smallest-inc/ui";

const DAY = 86_400;
const END = Date.UTC(2026, 8, 28) / 1000;

/** Daily values for the last 14 days, oldest first. */
const LATENCY = [812, 790, 804, 770, 776, 742, 751, 730, 722, 708, 716, 695, 688, 690];
const FAILED = [87, 46, 50, 72, 78, 75, 65, 66, 58, 65, 71, 71, 98, 88];

const daily = (values: number[]) =>
  values.map((value, index) => ({ time: END - (values.length - 1 - index) * DAY, value }));

/** Latency and failures should go down, so a negative delta is good news and shows green. */
export default function SpotlightChartLowerIsBetter() {
  return (
    <SpotlightChart
      axes="x"
      formatValue={(value, seriesId) =>
        seriesId === "latency" ? `${Math.round(value)} ms` : Math.round(value).toLocaleString("en-US")
      }
      domain={{ domain: { start: END - 13 * DAY, end: END } }}
      tabs={[
        {
          id: "latency",
          label: "Response latency",
          value: "690 ms",
          delta: -15,
          improvementDirection: "lower",
          series: [{ id: "latency", label: "p50 latency", color: "#0069F5", data: daily(LATENCY) }],
        },
        {
          id: "failed",
          label: "Failed calls",
          value: "990",
          delta: 6,
          improvementDirection: "lower",
          series: [{ id: "failed", label: "Failed", color: "#EF4444", data: daily(FAILED) }],
        },
      ]}
    />
  );
}

Best practices

When to use

Use when three to five KPIs share one time range and choosing one should swap the chart below (analytics overview).
Use PlotCard for a single metric with in-card range tabs, and Stat Strip for KPIs with no chart.

Behavior

Each tab owns id, label, a pre-formatted value, an optional delta and its series. Values are strings you format, not raw numbers.
delta is percent change. Set improvementDirection="lower" for latency, failures or handle time so a drop shows green.
The parent owns mode, like PlotCard. There are no range tabs in the card; filter by range above it.
Tabs are equal flex-1 cells. The active tab is white with a 1px fg bottom edge; inactive tabs are neutral-50. Do not swap in Chip or DS Tabs.
Control value/onValueChange and reset hiddenSeries when the tab changes, so a hidden series does not carry over.

Content

Use short labels ("Total calls", "Connect rate") and headline values that match the plotted range.
One formatValue can branch on the series id for counts, percents and durations.

Accessibility

Tabs use tablist/tab/tabpanel. Arrow keys, Home and End move between metrics.
The delta pill's sign is in the text (+10%), so the meaning does not depend on color.

PreviousPlot NextStat Strip