Beautiful Charts
Get Pro

Service latencyFree

Is the service within its target, and when did it slip?

npx shadcn@latest add https://beautifulcharts.dev/r/service-latency.json

Engine: ·

Code

"use client";

import { ServiceLatencyBlock } from "@/components/beautiful-charts/blocks/instrument/service-latency";

// The stats and copy recompute from your rows. Leave data out to see the sample.
export function Dashboard() {
  return <ServiceLatencyBlock />;
}

Props

  • data

    SankeyData

    Your rows. Missing values are null and stay gaps; with no rows every stat shows a dash. Leave it out to see the sample.

  • stats

    ChartStat[] | false

    Replace the computed stats with your own, or hide them with false.

  • footer

    ReactNode | false

    Replace the footer line, or hide it with false.

Every area chart prop works too, so you can restyle it without touching the source.

Accessibility, keyboard and motion

Pointer
Hover shows a crosshair and a tooltip with every series at that point; click pins it. Clicking a legend item hides or shows its series. An optional brush drags to choose a window.
Keyboard
Tab lands once on the plot. Left and Right move between points (the first press goes to the latest), Up and Down change series, Home and End jump to the ends, Enter or Space pins, Escape clears.
Screen readers
Every move is announced as a sentence, not coordinates. "Show data table" opens the numbers as a real table, and missing values stay empty, never zero.
Motion
Lines draw left to right, areas fill behind them, then the labels and callout fade in. The headline number rolls in. With reduced motion everything appears settled at once, and nothing depends on the motion to be read.

Related