WebAssembly 차트: C++ 엔진을 브라우저에서 실행하기

ProEssentialsJS is a JavaScript charting library. It was not written in JavaScript. It is the ProEssentials C++ engine, in continuous development since 1993, compiled to WebAssembly and drawing through Canvas2D and WebGPU. This post covers how that works, what it costs, and what you can verify yourself.

Three charting libraries ship WebAssembly

Every figure below comes from one public API, for every package, with no account and no download. Measured 2026-09-01.

https://data.jsdelivr.com/v1/packages/npm/<package>@<version>?structure=flat

SciChart also ships scichart2d-nosimd.wasm and scichart3d-nosimd.wasm. Those are alternates for browsers without SIMD, not additional modules, so they are not counted in the total.

LightningChart renders with WebGL and JavaScript. It ships no WebAssembly.

Package size

Same API, same date, same method as the table above.

Our wasm is larger. Our JavaScript is roughly nine times smaller, and the package is roughly eleven times smaller across twenty times fewer files. That is the shape of an engine that lives in the WebAssembly. A 2,151,691 byte JavaScript entry point is not a thin binding to a binary. It is code the browser fetches, parses and runs on every cold load, before the first chart appears, and it is doing work the binary should have already done.

To confirm any number, read versions["<version>"].dist from https://registry.npmjs.org/scicharthttps://registry.npmjs.org/proessentialsfor unpackedSize and fileCount. Read the jsdelivr URL above for individual file sizes.

The published package is also what the demos run. dist/proessentials.wasm in the npm package and lib/proessentials.wasm on the live demo are the same 2,925,264 bytes.

Why compile instead of rewrite

A charting engine spends its time in numerical loops. Transform, clip, scale, decimate, hit test.

Compiling removes the question. The C++ that ran on Windows is the C++ that runs in the browser. There is no second implementation to keep in step.

That matters more than performance. A rewrite means re-deriving thirty years of behavior, including every edge case nobody remembers writing. Axis label collision, log scales crossing zero, date arithmetic across time zones. Those are not features you port. They are decisions accumulated over decades.

The engine is the source, not a reference

ProEssentialsJS is not a browser library that imitates the desktop control. It is the same engine, compiled for a different target.

One consequence is practical. A property configured on WinUI is configured the same way in a browser, because it is the same property in the same engine.

What comes across with an engine

Right click a ProEssentialsJS chart and the engine shows its own menu. The end user can switch the chart to monochrome, change the plotting method, point type, line type and shading style, add a data table under the Pego chart, show or hide annotations, mark data points, bold the grid, add a title, adjust colors and fonts, and open a WYSIWYG export and print dialog with export size, print options and a font size slider.

None of that was built for the browser. It is engine code, written for Windows years before this was a target, localized into 20 cultures, and it arrived in JavaScript because the engine arrived in JavaScript.

This is the part of "compile it" that is hard to see from a feature list. You do not get the renderer. You get thirty years of accumulated behavior attached to it.

Two script tags, and why it cannot be one

The first tag is the engine, as a classic script. The second is your code, as a module.

It cannot be one tag, and that is not a packaging shortcoming. The property surfaces are real ES modules, and a classic script cannot hold one. Charting libraries that ship both forms split on the same line.

From npm, npm install proessentials. No bundler, no transpile step, no framework requirement. The walkthrough takes it from install to a live real time chart.

WebGPU needs a secure context

ProEssentialsJS draws through Canvas2D for 2D charts, and WebGPU for 3D surface and contour rendering.

navigator.gpu is undefined, not failing, on any origin that is not a secure context. Localhost counts as secure. A staging server reached by IP address does not.

So WebGPU works through development and disappears on the first internal deployment, and the symptom looks like a driver fault rather than a protocol rule. Check window.isSecureContext before concluding anything about GPU support.

Localization

Menus and dialogs ship in 20 cultures, including Simplified and Traditional Chinese. The library loads the culture it needs at run time. There is nothing to download, install, or register.

What to look at next

Three demos run the real engine, with no sign up and nothing to install.

Source for each is on GitHub. Performance numbers, with the conditions they were measured under, are on the fastest JavaScript chart page. Licensing, pricing and API surface against other libraries are on the JavaScript chart comparison page.

ProEssentialsJS is perpetual and royalty free. Organizations under $250,000 USD annual revenue use it free, commercially, with redistribution included. See JavaScript chart library and pricing.