UrCharts — GPU-Accelerated Financial Charting

Part of UrStack, my open-source organization for TypeScript libraries. Siblings: UrColor, UrVis, UrDock.

Overview

UrCharts renders charts on the GPU. Marks (lines, areas, splines, bars, candles, OHLC) go through WebGL2 via luma.gl. Text that has to stay crisp and selectable, meaning axes, labels, legends and tooltips, renders as SVG and HTML on top.

The core is a minimal kernel and everything else is a plugin. Chart types, scales and interactions all attach through the same extension surface, so a build only carries what it uses.

Why I built it

Charting libraries tend to fall apart at exactly the point financial workloads begin: tens of thousands of candles, updating live. DOM-based renderers stall, and the canvas-based ones that survive usually hard-code their chart types.

UrCharts pairs GPU rendering with D3's mathematics. Scales, ticks and formatting are solved problems worth reusing, so the part left open is the chart vocabulary itself.

Key features

• GPU rendering on WebGL2 through luma.gl, structured so WebGPU is a backend swap rather than a rewrite
• Financial marks: lines, areas, splines, bars, candles, OHLC
• A minimal kernel, with chart types and interactions attaching as plugins
• Streaming through a delta protocol and a RingBuffer, so live data flows without reallocating history
• D3 mathematics (d3-scale, d3-array, d3-time, d3-format) for scales, ticks and formatting
• Axes, labels, legends and tooltips rendered as SVG and HTML, so text stays crisp
• A Web Component core with React, Vue and Svelte adapters
• MIT licensed

Tech stack

TypeScript

WebGL

D3

Vue

React

Svelte

VitePress

• Rendering: WebGL2, luma.gl
• Math: D3 (d3-scale, d3-array, d3-time, d3-format)
• Core: TypeScript, Web Components
• Adapters: React, Vue, Svelte
• Docs: VitePress