Graph

The graph monitor plots a stream of numeric samples over time — perfect for FPS, frame timings, latency, or audio levels. You push samples into it; it handles the rolling history and rendering.

Try it

Usage

const fps = pp.graph({
  label: "FPS",
  min: 0,
  max: 120,
  history: 180,
  height: 70,
});

Configuration

interface GraphConfig extends BaseControlConfig {
  min?: number;
  max?: number;
  history?: number;
  height?: number;
  autoRange?: boolean;
  format?: (value: number) => string;
}

interface GraphSample {
  value: number;
  time: number;
}

interface GraphControl extends Control<GraphConfig> {
  push(value: number, time?: number): this;
  clear(): this;
  getSamples(): readonly GraphSample[];
}

• min / max fix the vertical range. Omit them and set autoRange: true to scale to the data.
• history is how many samples to retain.
• height is the drawing height in CSS pixels.

Pushing samples

Push one value per frame. You can pass an explicit timestamp as the second argument — handy when you already have now from requestAnimationFrame:

let previous = performance.now();

function frame(now: number) {
  const fpsValue = 1000 / (now - previous);
  previous = now;

  fps.push(fpsValue, now);

  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);

Use clear() to reset the history and getSamples() to read the retained samples (for exporting or inspection).

Rendering

The graph handles the tedious parts for you: fixed or auto range, rolling history, current-value display, resize handling, and device-pixel-ratio scaling. Like other visual controls, it pauses while hidden — when the control is not visible, its folder is collapsed, or the panel is collapsed.