API · Streaming

Stream points with appendData, cap windows with maxPoints, and update heatmaps/surfaces without full option rebuilds. For multi-chart boards, share one GPUDevice (and optional pipeline cache) across charts.

appendData

Streaming append for cartesian series (and 3D pointCloud3d). Prefer this over full setOption rewrites for high-rate streams.

import { ChartGPU } from '@chartgpu/chartgpu';

const chart = await ChartGPU.create(container, {
  autoScroll: true,
  dataZoom: { enabled: true },
  series: [{ type: 'line', data: seedPoints }],
});

// Append a batch; keep a fixed-capacity ring of 50_000 points
chart.appendData(0, newPoints, { maxPoints: 50_000 });

• Formats: DataPoint[], XYArraysData, interleaved XY, band/errorBar payloads, or OHLCDataPoint[]
• Not for heatmap / surface3d / pie — use updateHeatmap, updateSurface3D, or full setOption
• Event: on('dataAppend', …) fires after append processing (see Interaction)

maxPoints (FIFO ring)

Optional { maxPoints } is per call, not sticky series construction state. Omit later calls for unbounded growth (subject to device storage caps).

• If a single batch is ≥ maxPoints, keep only that batch’s tail (strict replace)
• Otherwise fill up to capacity, then overwrite oldest slots (fixed-capacity ring)
• Peak retained length / GPU reservation = maxPoints
• When growth would exceed device storage buffer limits, ChartGPU auto-windows to that budget so the x-domain stays in sync with GPU-resident data

autoScroll

When autoScroll: true, appendData() keeps the visible x-range anchored to newest data (data zoom enabled and xAxis.min/max unset). Disables sticky X headroom so FIFO windows track retained data min/max.

const chart = await ChartGPU.create(container, {
  autoScroll: true,
  dataZoom: { enabled: true, type: 'inside' },
  xAxis: { type: 'time' },
  series: [{ type: 'line', data: [] }],
});

Shared GPUDevice (multi-chart)

Inject one adapter/device so multiple charts share GPU resources. Injected devices are not destroyed on dispose() — you own the device. Optional pipelineCache dedupes shader/pipeline creation.

import { ChartGPU, createPipelineCache } from '@chartgpu/chartgpu';

const adapter = await navigator.gpu.requestAdapter({ powerPreference: 'high-performance' });
const device = await adapter!.requestDevice();
const pipelineCache = createPipelineCache(device);
const ctx = { adapter: adapter!, device, pipelineCache };

const chart1 = await ChartGPU.create(el1, opts1, ctx);
const chart2 = await ChartGPU.create(el2, opts2, ctx);

// later
chart1.dispose();
chart2.dispose();
device.destroy();

Full details: Chart API — sharing GPU resources.

updateHeatmap

2D only — streaming / partial update for type: 'heatmap' (replaceZ / appendColumns+scrollX / appendRows+scrollY). Not cartesian appendData.

// Full Z replace (grid meta unchanged)
chart.updateHeatmap(0, { mode: 'replaceZ', z: newValues });

// Spectrogram-style: append columns and scroll
chart.updateHeatmap(0, {
  mode: 'appendColumns',
  columns: 1,
  z: newColumn, // length === rows * columns
  scrollX: true,
});

Series config: HeatmapSeriesConfig · Demo: Heatmap spectrogram.

updateSurface3D

3D only — partial update for surface3d (replaceY / appendColumns / appendRows). No-op on 2D. See 3D API.

External render mode

Set renderMode: 'external' to drive ChartGPU from your own loop. renderFrame() encodes the frame and batches device.queue.submit via microtask for multi-chart shared-device present.

const chart = await ChartGPU.create(container, {
  renderMode: 'external',
  series: [{ type: 'line', data }],
});

function loop() {
  if (chart.needsRender()) chart.renderFrame();
  requestAnimationFrame(loop);
}
loop();

Related

• Chart API — create, instance methods, connectCharts
• Options — autoScroll, dataZoom, series sampling
• Performance guide — sampling, LOD, multi-chart notes
• Multi-chart dashboards — shared device, appendData patterns

API reference for the linked @chartgpu/chartgpu package (v0.4.0). Source on GitHub.