Skip to content

Releases: ChartGPU/chartgpu-react

Upgrade core package, sync, and interaction APIs

11 Feb 16:41
ff2ea6d

Choose a tag to compare

Highlights

This release upgrades chartgpu-react to the latest @chartgpu/chartgpu core and significantly expands the public API for sync, zoom, and interaction workflows.[page:1][page:2] It also refreshes the documentation and DX so React apps can use ChartGPU’s newer performance and authoring features with minimal glue code.[page:1][page:2]

Core & packaging

  • Switched the peer dependency from chartgpu to @chartgpu/chartgpu, aligning the React bindings with the new core package naming.[page:1]
  • Updated documentation, examples, and local dev instructions to use the new package name everywhere.[page:1]
  • Ensured compatibility with chartgpu@0.2.5+, including annotation authoring patches referenced in the LLM docs.[page:1]

New handle methods

ChartGPUHandle now exposes several new methods for programmatic control in React components.[page:1]

  • setZoomRange for imperative zooming (e.g. “Reset zoom”, “Zoom to selection”, “Zoom last N bars”).[page:1]
  • setInteractionX and getInteractionX for driving crosshair / hover position from external UI (sliders, synced charts, custom inspectors).[page:1]
  • hitTest with ergonomics for React nativeEvent, making it easier to map pointer events to data points without manual coordinate transforms.[page:1]

These methods are designed for both “widget-style” usage (simple charts) and highly interactive charting surfaces (trading UIs, dashboards, editors).[page:1]

Expanded TypeScript surface

To reduce “import-from-core” hops, the React package now re-exports a broader set of core types.[page:1]

  • Zoom and sync: ZoomRange, ZoomRangeChangePayload, ChartSyncOptions.[page:1]
  • Interaction and hit-testing: hit-test result types for working directly with series / points.[page:1]
  • Presentation and behavior: style, legend, tooltip, animation, and performance-related types commonly needed in app code.[page:1]

This enables a single-import DX (chartgpu-react) for most application-level usage while still matching the underlying core API.[page:1]

Zoom and sync improvements

Zoom and crosshair syncing have been upgraded to be more explicit and less “magic”.[page:1]

  • onZoomChange is now wired to the core zoomRangeChange event instead of polling getZoomRange(), ensuring updates reflect the actual chart state and initial zoom range.[page:1]
  • useConnectCharts and connectCharts now accept ChartSyncOptions so you can opt in to syncCrosshair, syncZoom, or both.[page:1]
  • When sync options change, charts will correctly reconnect with the new configuration, which is important for conditional/switchable sync in dashboards.[page:1]

Docs, branding, and LLM context

The docs and metadata for chartgpu-react have been refreshed to match the current ChartGPU ecosystem.[page:1]

  • README updates with new branding, performance positioning, WebGPU badge, HN / Awesome links, and clearer value proposition for React users.[page:1]
  • LLM-oriented docs (llm-context.md, guides, and recipes) updated to refer to @chartgpu/chartgpu, note patched createAnnotationAuthoring behavior, and describe the new sync/interaction capabilities.[page:1]
  • Examples updated to demonstrate common patterns: programmatic zoom, crosshair sync between charts, and hit-testing from React event handlers.[page:1]

Migration notes

  • Replace chartgpu imports with @chartgpu/chartgpu in your app if you are consuming core directly.[page:1]
  • Where you previously relied on implicit zoom polling, prefer the new onZoomChange event wiring for more predictable behavior.[page:1]
  • For multi-chart views, use useConnectCharts/connectCharts with ChartSyncOptions to explicitly opt into zoom and crosshair sync scenarios.[page:1]

If you run into any issues upgrading, please open an issue with a minimal reproduction so we can refine the React bindings further.[page:1]

Version upgrade to ChartGPU v0.2.3

09 Feb 22:35
ef0cf38

Choose a tag to compare

What's Changed

Full Changelog: v0.1.0...v0.1.1

v0.1.0 - Initial Release

20 Jan 22:23
fed8baf

Choose a tag to compare

chartgpu-react v0.1.0

React wrapper for ChartGPU.

Features

  • <ChartGPU /> component — Declarative chart rendering
  • Lifecycle management — Auto-init, update on prop change, dispose on unmount
  • Ref forwarding — Access chart instance for imperative methods
  • Event handlersonReady, onClick, onZoomChange
  • Responsive — ResizeObserver integration
  • HooksuseChartGPU, useConnectedCharts

Installation

npm install chartgpu-react

Includes chartgpu as a dependency—no need to install separately.

Quick Start

import { ChartGPU } from 'chartgpu-react';

function App() {
  return (
    <ChartGPU
      options={{
        series: [{ type: 'line', data: [[0, 1], [1, 3], [2, 2]] }],
      }}
      style={{ width: '100%', height: 400 }}
    />
  );
}

Requirements

  • React 18+
  • WebGPU-capable browser

Links