Skip to content

Upgrade core package, sync, and interaction APIs

Latest

Choose a tag to compare

@hunterg325 hunterg325 released this 11 Feb 16:41
ff2ea6d

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]