High-Performance WebGPU Charting Library for Large Datasets – ChartGPU

ChartGPU is a data visualization library that leverages WebGPU to render interactive, hardware-accelerated charts with extreme performance. It handles datasets with millions of points while maintaining smooth frame rates above 100 FPS.

The high-performance charting library supports multiple series types, including line, area, bar, scatter, pie, and candlestick charts. Ideal for real-time dashboards, financial applications, or data visualization tools that require exceptional performance with large or streaming datasets.

Features

• WebGPU Hardware Acceleration: Renders charts using GPU compute shaders for parallel processing of large datasets.
• Streaming Data Support: Provides appendData() method for real-time updates without full re-renders.
• Built-in Interactions: Includes hover tooltips, crosshair tracking, and zoom controls with configurable trigger modes.
• Data Sampling: Implements LTTB (Largest Triangle Three Buckets) and OHLC sampling to maintain visual fidelity while reducing rendered points.
• Theme System: Ships with dark and light presets plus custom theme support for colors, typography, and grid styling.
• TypeScript Native: Written in TypeScript with full type definitions for configuration options and API methods.
• React Integration: Offers official React bindings via the chartgpu-react package.

Use Cases

• Financial Trading Platforms: Render candlestick charts with millions of historical price points and real-time tick updates at market speed.
• IoT Monitoring Dashboards: Display streaming sensor data from hundreds of devices with synchronized crosshair interactions across multiple time-series charts.
• Scientific Data Visualization: Plot large experimental datasets with scatter series where per-point sizing reveals data density patterns.
• Performance Analytics: Build interactive dashboards tracking application metrics with auto-scrolling time windows and configurable zoom ranges.

How To Use It:

1. Install the ChartGPU with NPM.

# NPM
$ npm install chartgpu

2. Create a wrapper in your HTML. Then initialize the chart instance in your JavaScript/TypeScript code.

import { ChartGPU } from 'chartgpu';

// Check if WebGPU is available in the browser
if (!('gpu' in navigator)) {
  console.error('WebGPU not supported in this browser');
  // Display fallback message to user
}

// Select the container element
const container = document.getElementById('chart');

// Define the chart options
const options = {
  // Set internal grid padding
  grid: { left: 60, right: 20, top: 20, bottom: 40 },
  
  // Configure axis types
  xAxis: { type: 'time', name: 'Timestamp' },
  yAxis: { type: 'value', name: 'Price' },
  
  // Define data series
  series: [{
    type: 'line',
    name: 'Main Signal',
    // Data format: [x, y] tuples
    data: [[1700000000000, 10.5], [1700000060000, 15.2]],
    lineStyle: { width: 2, opacity: 1 }
  }]
};

// Initialize asynchronously (WebGPU requirement)
ChartGPU.create(container, options).then(chart => {
  console.log('Chart is ready');
});

3. Use the official React component wrapper to create charts in your React apps.

import { ChartGPUChart } from 'chartgpu-react';
import { useState } from 'react';

function MyChart() {
  const [data, setData] = useState([[0, 10], [1, 20], [2, 15]]);
  
  return (
    <ChartGPUChart
      options={{
        series: [{
          type: 'line',
          data: data
        }],
        theme: 'light'
      }}
      // Chart updates automatically when options prop changes
    />
  );
}

4. Full configuration options.

• grid (object): Controls the padding around the chart. Properties: left, right, top, bottom (numbers in CSS pixels).
• xAxis (object): Configures the horizontal axis. Properties:
  • type (string): ‘value’, ‘time’, or ‘category’.
  • min (number): Explicit minimum domain value.
  • max (number): Explicit maximum domain value.
  • name (string): The label displayed near the axis.
  • data (array): Array of strings. Only used when type is ‘category’.
• yAxis (object): Configures the vertical axis. Properties: type (usually ‘value’), min, max, name.
• autoScroll (boolean): If true, the chart automatically pans to follow new data appended via appendData.
• animation (object | boolean): Controls transition effects. Properties:
  • duration (number): Animation length in milliseconds.
  • easing (string): Easing function (e.g., ‘linear’, ‘cubicOut’).
  • delay (number): Delay before animation starts in milliseconds.
• theme (string | object): Sets the visual style. Accepts ‘dark’, ‘light’, or a custom object defining colors.
• palette (array): An array of color strings to cycle through for series that don’t specify a color.
• dataZoom (array): Configures zoom interaction. Array of objects with properties:
  • type (string): ‘slider’ (visible widget) or ‘inside’ (mouse wheel/drag).
  • start (number): Initial start percentage (0-100).
  • end (number): Initial end percentage (0-100).
• tooltip (object): Controls the pop-over info box. Properties: show (boolean), trigger (‘axis’ or ‘item’).
• series (array): A list of series configuration objects. Common properties for all types:
  • type (string): ‘line’, ‘area’, ‘bar’, ‘pie’, ‘scatter’, ‘candlestick’.
  • name (string): The series name used in tooltips.
  • data (array): The dataset. Usually [x, y] or [timestamp, open, close, low, high].
  • color (string): The primary color for the series.
  • sampling (string): Downsampling strategy for large datasets (‘lttb’, ‘min’, ‘max’, ‘average’, ‘none’).
  • samplingThreshold (number): Point count threshold to trigger sampling.
• series (Line Specific):
  • lineStyle (object): Properties: width (pixels), opacity (0-1).
  • areaStyle (object): Properties: color, opacity. (If present, renders a filled area).
• series (Candlestick Specific):
  • itemStyle (object): Properties: upColor, downColor, upBorderColor, downBorderColor, borderWidth.
  • barWidth (string | number): Fixed width or percentage (e.g., ‘80%’).
• series (Pie Specific):
  • radius (array): [inner, outer] (e.g., ['40%', '70%']).
  • center (array): [x, y] (e.g., ['50%', '50%']).
  • data (array): Objects with { value, name }.
• series (Scatter Specific):
  • symbolSize (number): The pixel radius of the points.

5. API methods.

/ Updates the chart configuration.
// This triggers a complete re-render of the scene.
chart.setOption({
  series: [{ data: newCompleteDataset }]
});

// Appends data efficiently to an existing series.
// This is critical for high-performance real-time streaming.
// Parameters: seriesIndex (number), newPoints (array of tuples/objects)
chart.appendData(0, [[Date.now(), 25.4]]);

// Forces the chart to resize.
// Call this inside your window 'resize' event listener.
chart.resize();

// Cleans up all WebGPU resources and removes event listeners.
// Always call this before removing the DOM element to prevent memory leaks.
chart.dispose();

// Sets the zoom window programmatically.
// Parameters: start (percent), end (percent)
chart.setZoomRange(80, 100);

// Gets the current interaction position (crosshair X) in domain units.
// Returns null if the cursor is not active.
const xValue = chart.getInteractionX();

// Manually sets the crosshair position.
// Useful for synchronizing multiple charts.
chart.setInteractionX(timestampValue);

6. Event handlers.

// Triggers when the user clicks on a data point.
chart.on('click', (params) => {
  // params: { seriesIndex, dataIndex, value: [x, y], seriesName }
  console.log('User clicked:', params.value);
});

// Triggers when the mouse hovers over a data point.
chart.on('mouseover', (params) => {
  console.log('Hovering series:', params.seriesName);
});

// Triggers when the crosshair moves across the grid.
// Useful for updating external UI elements based on cursor position.
chart.on('crosshairMove', (params) => {
  // params: { x: number | null, source: unknown }
  console.log('Current X Domain:', params.x);
});

FAQs:

Q: Does this work in all browsers?
A: No. It requires a browser with WebGPU support. This includes Chrome 113+, Edge 113+, and Firefox Nightly.

Q: Is it faster than Canvas-based libraries?
A: Yes, for large datasets. Canvas 2D is CPU-bound. ChartGPU leverages the GPU. This difference becomes noticeable once you exceed ~10,000 data points or require 60fps streaming.

Q: How do I handle window resizing?
A: You must listen to the window resize event. Then call chart.resize(). We recommend using a ResizeObserver on the container element for robustness.

Q: Why does my chart look blank?
A: Check your browser’s console. WebGPU requires a secure context (HTTPS or localhost). It will not run if the browser environment does not support the navigator.gpu API.

The post High-Performance WebGPU Charting Library for Large Datasets – ChartGPU appeared first on CSS Script.