Ripl

Appearance

Realtime Chart ​

The Realtime Chart smoothly visualizes data streaming in over time. It maintains a sliding window of data points: while the window fills the line grows from the left, and once full it scrolls left with each new value entering from the right as you push(). Ideal for live dashboards, server monitoring, and any scenario where data arrives continuously. Each series can show an area fill with configurable opacity, and the chart includes crosshair, grid, legend, and tooltips.

NOTE

For the full API, see the Charts API Reference.

Example ​

Usage ​

ts
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();

Options ​

  • series — Array of series with id, label, optional color, lineType, lineWidth, showArea, areaOpacity
  • windowSize — Maximum visible data points (default 60)
  • transitionDuration — Transition duration per update in ms (default 300)
  • grid — boolean | ChartGridOptions — Show/configure grid lines (default true)
  • crosshair — boolean | ChartCrosshairOptions — Show/configure crosshair (default true)
  • tooltip — boolean | ChartTooltipOptions — Show/configure tooltips
  • legend — boolean | ChartLegendOptions — Show/configure legend (default true)
  • axis — boolean | ChartAxisOptions — Configure axes (default true)
  • yMin / yMax — Fixed Y axis bounds (auto-computed if omitted)
  • padding — Chart padding

Methods ​

  • push(values) — Append a data point for each series. Keys must match series id values.
  • clear() — Reset all buffers and clear the chart.
  • update(options) — Update chart options (inherited from Chart).
  • destroy() — Destroy the chart and release resources.