Realtime Chart

The Realtime Chart holds a sliding window of the most recent values and scrolls it as you push() new ones: while the window fills the line grows from the left, and once full each new value enters from the right and the oldest falls off. It fits live dashboards, server and device monitoring, and anything where data arrives continuously and only the recent past matters. windowSize sets how much history stays on screen, yMin/yMax pin the value axis instead of letting it track the data, transitionDuration sets how long each push's scroll takes, and each series takes showArea with its own fillOpacity. Crosshair, grid, legend and tooltips are built in. Canvas and SVG both draw it, as does a headless terminal context.

NOTE

For the full API, see the Charts API Reference.

Example

SpeedFast (100ms)Normal (300ms)Slow (1s)

Customize

Window size60Transition (ms)200CPU areaCPU fill0.15Memory areaMemory fill0.15Network areaLine typeLinearMonotone XStepStep AfterLine width2

CPU %#7cacf8Memory %#6dd5b1Network MB/s#b197fc

Show legendPositionTopBottomLeftRight

Show titleTitle text

Show y axisY minY max

Show tooltipTriggerItemAxis

Show crosshairTrack axisXYBoth

FormatDefaultNumberPercentageDateString

Padding16

ThemeAutoLightDarkColorblind

AnimateDuration (ms)1000

Usage

import {
    createRealtimeChart,
} from '@ripl/charts';

const chart = createRealtimeChart('#container', {
    windowSize: 60,
    transitionDuration: 200,
    series: [
        {
            id: 'cpu',
            label: 'CPU %',
            showArea: true,
        },
        {
            id: 'memory',
            label: 'Memory %',
            showArea: true,
        },
    ],
});

// Push data as it arrives
setInterval(() => {
    chart.push({
        cpu: Math.random() * 100,
        memory: Math.random() * 100,
    });
}, 300);

// Clear the buffer
chart.clear();

Data Format

A realtime chart has no data option: it holds a rolling window and you push samples into it. Each push is one object keyed by series id:

const chart = createRealtimeChart('#container', {
    windowSize: 60,
    series: [
        {
            id: 'cpu',
            label: 'CPU %',
        },
        {
            id: 'memory',
            label: 'Memory %',
        },
    ],
});

chart.push({
    cpu: 42,
    memory: 61,
});

The chart keeps the most recent windowSize samples and drops the rest. chart.clear() empties the window.

Options

A full configuration for this chart. The options every chart shares — padding, title, animation, theme and the rest — behave the same everywhere and are documented on Shared Options.

createRealtimeChart('#container', {
    // Samples kept in the sliding window; older ones scroll off the left.
    windowSize: 60,
    // Duration of the transition applied on each `push()`, in milliseconds.
    transitionDuration: 300,
    showYAxis: true,
    yMin: 0,
    yMax: 100,
    grid: true,
    crosshair: true,
    tooltip: true,
    legend: { position: 'bottom' },
    axis: { y: { title: 'Utilisation' } },
    format: 'number',
    series: [
        {
            id: 'cpu',
            label: 'CPU %',
            color: '#7cacf8',
            lineType: 'monotoneX',
            lineWidth: 2,
            showArea: true,
            fillOpacity: 0.15,
        },
    ],
});

Events

Subscribe with chart.on(...). A handler receives an Event object, not the payload directly — the payload is on event.data, and carries the interacted datum plus its { x, y } anchor in chart pixels. event.target and event.stopPropagation() are also available.

This chart emits no events.