GitHub - ChartGPU/ChartGPU: Beautiful, open source, WebGPU-based charting library

Skip to content

Navigation Menu

Toggle navigation

Sign in

Appearance settings

PlatformAI CODE CREATIONGitHub CopilotWrite better code with AIGitHub SparkBuild and deploy intelligent appsGitHub ModelsManage and compare promptsMCP RegistryNewIntegrate external toolsDEVELOPER WORKFLOWSActionsAutomate any workflowCodespacesInstant dev environmentsIssuesPlan and track workCode ReviewManage code changesAPPLICATION SECURITYGitHub Advanced SecurityFind and fix vulnerabilitiesCode securitySecure your code as you buildSecret protectionStop leaks before they startEXPLOREWhy GitHubDocumentationBlogChangelogMarketplaceView all featuresSolutionsBY COMPANY SIZEEnterprisesSmall and medium teamsStartupsNonprofitsBY USE CASEApp ModernizationDevSecOpsDevOpsCI/CDView all use casesBY INDUSTRYHealthcareFinancial servicesManufacturingGovernmentView all industriesView all solutionsResourcesEXPLORE BY TOPICAISoftware DevelopmentDevOpsSecurityView all topicsEXPLORE BY TYPECustomer storiesEvents & webinarsEbooks & reportsBusiness insightsGitHub SkillsSUPPORT & SERVICESDocumentationCustomer supportCommunity forumTrust centerPartnersOpen SourceCOMMUNITYGitHub SponsorsFund open source developersPROGRAMSSecurity LabMaintainer CommunityAcceleratorArchive ProgramREPOSITORIESTopicsTrendingCollectionsEnterpriseENTERPRISE SOLUTIONSEnterprise platformAI-powered developer platformAVAILABLE ADD-ONSGitHub Advanced SecurityEnterprise-grade security featuresCopilot for BusinessEnterprise-grade AI featuresPremium SupportEnterprise-grade 24/7 supportPricing

Search or jump to...

Search code, repositories, users, issues, pull requests...

Search

Clear

Search syntax tips

Provide feedback

We read every piece of feedback, and take your input very seriously.

Include my email address so I can be contacted

Cancel

Submit feedback

Saved searches

Use saved searches to filter your results more quickly

Name

Query

To see all available qualifiers, see our documentation.

Cancel

Create saved search

Sign in

Sign up

Appearance settings

Resetting focus

You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.
You switched accounts on another tab or window. Reload to refresh your session.

Dismiss alert

ChartGPU

/

ChartGPU

Public

Notifications
You must be signed in to change notification settings

Fork
30

Star
1.3k

Beautiful, open source, WebGPU-based charting library

License

MIT license

1.3k
stars

30
forks

Branches

Tags

Activity

Star

Notifications
You must be signed in to change notification settings

Code

Issues
2

Pull requests
0

Actions

Projects
0

Security

Uh oh!

There was an error while loading. Please reload this page.

Insights

Additional navigation options

Code

Issues

Pull requests

Actions

Projects

Security

Insights

ChartGPU/ChartGPU

 mainBranchesTagsGo to fileCodeOpen more actions menuFolders and filesNameNameLast commit messageLast commit dateLatest commit History272 Commits.claude/agents.claude/agents  .cursor.cursor  .github.github  docsdocs  examplesexamples  srcsrc  .gitignore.gitignore  CHANGELOG.mdCHANGELOG.md  CLAUDE.mdCLAUDE.md  CONTRIBUTING.mdCONTRIBUTING.md  LICENSELICENSE  README.mdREADME.md  package-lock.jsonpackage-lock.json  package.jsonpackage.json  tsconfig.jsontsconfig.json  vite.config.tsvite.config.ts  View all filesRepository files navigationREADMEContributingMIT licenseSecurity

High-performance charts powered by WebGPU

Documentation |
Live Demo |
Examples

ChartGPU is a TypeScript charting library built on WebGPU for smooth, interactive rendering—especially when you have lots of data.
Highlights

🚀 WebGPU-accelerated rendering for high FPS with large datasets
📈 Multiple series types: line, area, bar, scatter, pie, candlestick
🧭 Built-in interaction: hover highlight, tooltip, crosshair
🔁 Streaming updates via appendData(...) (cartesian series)
🔍 X-axis zoom (inside gestures + optional slider UI)
🎛️ Theme presets ('dark' | 'light') and custom theme support

Architecture
At a high level, ChartGPU.create(...) owns the canvas + WebGPU lifecycle, and delegates render orchestration (layout/scales/data upload/render passes + internal overlays) to the render coordinator. For deeper internal notes, see docs/API.md (especially “Render coordinator”).

flowchart TB
UserApp["Consumer app"] --> PublicAPI["src/index.ts (Public API exports)"]

PublicAPI --> ChartCreate["ChartGPU.create(container, options)"]
PublicAPI --> SyncAPI["connectCharts(charts)"]

subgraph ChartInstance["Chart instance (src/ChartGPU.ts)"]
ChartCreate --> SupportCheck["checkWebGPUSupport()"]
ChartCreate --> Canvas["Create canvas + mount into container"]
ChartCreate --> Options["resolveOptions(options)"]
ChartCreate --> GPUInit["GPUContext.create(canvas)"]
ChartCreate --> Coordinator["createRenderCoordinator(gpuContext, resolvedOptions)"]

ChartCreate --> InstanceAPI["ChartGPUInstance APIs"]
InstanceAPI --> RequestRender["requestAnimationFrame (coalesced)"]
RequestRender --> Coordinator

InstanceAPI --> SetOption["setOption(...)"]
InstanceAPI --> AppendData["appendData(...)"]
InstanceAPI --> Resize["resize()"]

subgraph PublicEvents["Public events + hit-testing (ChartGPU.ts)"]
Canvas --> PointerHandlers["Pointer listeners"]
PointerHandlers --> PublicHitTest["findNearestPoint() / findPieSlice()"]
PointerHandlers --> EmitEvents["emit('click'/'mouseover'/'mouseout')"]
end

DataZoomSlider["dataZoom slider UI (DOM)"] --> Coordinator
end

subgraph WebGPUCore["WebGPU core (src/core/GPUContext.ts)"]
GPUInit --> AdapterDevice["navigator.gpu.requestAdapter/device"]
GPUInit --> CanvasConfig["canvasContext.configure(format)"]
end

subgraph RenderCoordinatorLayer["Render coordinator (src/core/createRenderCoordinator.ts)"]
Coordinator --> Layout["GridArea layout"]
Coordinator --> Scales["xScale/yScale (clip space for render)"]
Coordinator --> DataUpload["createDataStore(device) (GPU buffer upload/caching)"]
Coordinator --> RenderPass["Encode + submit render pass"]

subgraph InternalOverlays["Internal interaction overlays (coordinator)"]
Coordinator --> Events["createEventManager(canvas, gridArea)"]
Events --> OverlayHitTest["hover/tooltip hit-testing"]
Events --> InteractionX["interaction-x state (crosshair)"]
Coordinator --> OverlaysDOM["DOM overlays: legend / tooltip / text labels"]
end
end

subgraph Renderers["GPU renderers (src/renderers/*)"]
RenderPass --> GridR["Grid"]
RenderPass --> AreaR["Area"]
RenderPass --> BarR["Bar"]
RenderPass --> ScatterR["Scatter"]
RenderPass --> LineR["Line"]
RenderPass --> PieR["Pie"]
RenderPass --> CandlestickR["Candlestick"]
RenderPass --> CrosshairR["Crosshair overlay"]
RenderPass --> HighlightR["Hover highlight overlay"]
RenderPass --> AxisR["Axes/ticks"]
end

subgraph Shaders["WGSL shaders (src/shaders/*)"]
GridR --> gridWGSL["grid.wgsl"]
AreaR --> areaWGSL["area.wgsl"]
BarR --> barWGSL["bar.wgsl"]
ScatterR --> scatterWGSL["scatter.wgsl"]
LineR --> lineWGSL["line.wgsl"]
PieR --> pieWGSL["pie.wgsl"]
CandlestickR --> candlestickWGSL["candlestick.wgsl"]
CrosshairR --> crosshairWGSL["crosshair.wgsl"]
HighlightR --> highlightWGSL["highlight.wgsl"]
end

subgraph ChartSync["Chart sync (src/interaction/createChartSync.ts)"]
SyncAPI --> ListenX["listen: 'crosshairMove'"]
SyncAPI --> DriveX["setCrosshairX(...) on peers"]
end

InteractionX --> ListenX
DriveX --> InstanceAPI

Loading

Demo

Candlestick Charts
Financial OHLC (open-high-low-close) candlestick rendering with classic/hollow style toggle and color customization. The live streaming demo renders 5 million candlesticks at over 100 FPS with real-time updates.

Quick start
import { ChartGPU } from 'chartgpu';
const container = document.getElementById('chart')!;
await ChartGPU.create(container, {
series: [{ type: 'line', data: [[0, 1], [1, 3], [2, 2]] }],
});
Installation
npm install chartgpu
React Integration
React bindings are available via chartgpu-react:
npm install chartgpu-react
import { ChartGPUChart } from 'chartgpu-react';

function MyChart() {
return (
<ChartGPUChart
options={{
series: [{ type: 'line', data: [[0, 1], [1, 3], [2, 2]] }],
}}
/>
);
}
See the chartgpu-react repository for full documentation and examples.
Browser support (WebGPU required)

Chrome 113+ or Edge 113+ (WebGPU enabled by default)
Safari 18+ (WebGPU enabled by default)
Firefox: not supported (WebGPU support in development)

Documentation

Full documentation: Getting Started
API reference: docs/API.md

Examples

Browse examples: examples/
Run locally:

npm install
npm run dev (opens http://localhost:5176/examples/)

Contributing
See CONTRIBUTING.md.
License
MIT — see LICENSE.

About

Beautiful, open source, WebGPU-based charting library

Topics

react

open-source

npm

chart

webgl

charting-library

npm-package

data-visualization

typescript-library

data-analytics

data-analysis

chart-library

charting

webgpu

react-chart-library

data-visualization-tools

webgpu-shaders

Resources

Readme

License

MIT license

Contributing

Contributing

Security policy

Security policy

Uh oh!

There was an error while loading. Please reload this page.

Activity

Custom properties
Stars

1.3k
stars
Watchers

8
watching
Forks

30
forks

Report repository

Releases
7

Fixes candlestick timeframe handling in the streaming demo and updates documentation to highlight large-scale performance

Latest

Jan 22, 2026

+ 6 releases

Packages
0

No packages published

Languages

TypeScript
96.9%

WGSL
3.1%

Footer

© 2026 GitHub, Inc.

Footer navigation

Terms

Privacy

Security

Status

Community

Docs

Contact

Manage cookies

Do not share my personal information

You can’t perform that action at this time.

ChartGPU is a TypeScript charting library built upon WebGPU, designed to deliver high-performance, interactive visualizations, particularly when dealing with substantial datasets. The library’s core strength lies in its utilization of WebGPU, a modern graphics API, enabling accelerated rendering and smooth scrolling, even with datasets containing millions of data points. This makes it a suitable choice for applications requiring real-time updates and high frame rates.

The architecture of ChartGPU is meticulously structured for efficiency and scalability. At its foundation is the `ChartGPU.create()` function, which is responsible for establishing the canvas element and initiating the WebGPU context. This function then delegates the complex orchestration of rendering operations to a dedicated render coordinator. The coordinator, in turn, manages the layout, scales, data upload, and render passes, alongside internal overlays such as crosshair indicators and hover highlight effects. The library's rendering process is further refined through a collection of GPU renderers, each specialized for different chart types, including line, area, bar, scatter, pie, candlestick, and crosshair visualizations. These renderers translate data into WebGPU shaders (written in WGSL), which perform the core rendering calculations.

ChartGPU features a robust set of interactive elements. It supports features such as hovering highlights, tooltips, and a crosshair indicator, which are all tied to pointer events on the canvas. A key aspect of the library’s design is its streaming data support, achieved through the `appendData()` method, which allows for real-time updates to the chart as new data streams in. This functionality is particularly valuable in applications like financial dashboards where data is constantly changing. ChartGPU provides a user-friendly API with components like `ChartGPUChart` to integrate into applications and it is available with chartgpu-react integration using NPM.

The library supports a wide range of chart types, with pre-built renderers for line, area, bar, scatter, pie, candlestick, and crosshair visualizations.

A prominent example is its ability to render 5 million candlestick charts at over 100 FPS with real-time updates, demonstrating its high-performance capabilities. This makes it a strong choice for financial applications where data is constantly changing. While the library functions using WebGPU, it is compatible with Chrome 113+, Edge 113+, Safari 18+, and supports newer versions of Chrome and Edge where WebGPU is enabled by default.