JavaScript Chart Examples

Welcome to the live demo page. These demos are best viewed on a desktop. They run on mobile too, reduced in complexity, so you can still compare them there.

Each opens in a new window. No install, no account, no email, no licence key.

1 — Fast 2D: GigaPrime2D

A single line chart carrying five subsets of up to twenty million points each — one hundred million points in the browser. That is not a reduced web figure: it is the size our Win32 desktop demo runs, and the demo labels it so.

The whole dataset is replaced on every tick, not appended to. Turn the timer on and the engine re-passes all five subsets each frame. Replacement is the case most web charts quietly avoid demonstrating, and it is the one the engine was built for.

It starts at 400,000 points so the page is usable immediately, and the ladder goes up from there. You can combine or separate the Y axes, highlight one subset at a time, hide the axes, cap the zoom and watch the frame rate while you do it.

On a phone the three largest sizes are removed from the list rather than offered and allowed to fail. A hundred million points needs roughly 458 MB, and a phone browser ends that tab without warning.

Launch GigaPrime2D Source on GitHub

2 — 3D Surface + 2D Contour + 2D Line: GigaPrime3D

Three chart types on one screen, driven by one dataset. A lit 3D surface, a 2D contour of the same data, and a 2D line through the slice you select. Move the slice and all three follow.

The surfaces are real scanned data, not generated noise: the Grand Canyon at 1345 x 1345, material surface scans at 1232 x 1028 and 1256 x 684, and a noisy terrain at 1451 x 1451. Rotate it, magnify it, explode the Z axis, and move the light around the model.

Rendering is WebGPU, so the surface is drawn by the same graphics hardware a native application would use.

WebGPU needs a current browser and a secure context. If the 3D view does not appear, that is almost always the browser rather than the machine.

Launch GigaPrime3D Source on GitHub

3 — 100+ Tutorial Demo with Code Window: PeDemo

The same example set that ships with our desktop demo — the one WinForms, WPF, WinUI, MFC and Delphi developers have been reading for thirty years — running natively in your browser on WebAssembly.

The list is on the left, the JavaScript source is in the top-right pane, and the chart is below it. Click an example and you are looking at working code and the chart it produces, side by side.

Most charting demos show a finished picture and hide the code behind a "view source" link or a documentation page written months apart from the example. Ours puts the JavaScript that produced the chart directly above the chart, in the same window, always in sync — because it is the file the demo just executed.

The question an engineer is really asking is not "can it draw this?" but "how much code is this going to cost me?" Reading the property list beside the result answers that in about five seconds, and it is the honest way to be judged.

It is also the same code you would write on the desktop. The JavaScript property names are the WinForms property names, so a C# developer reading these examples is reading a language they already know. See the walkthrough for the side by side.

Launch PeDemo Source on GitHub

What is in PeDemo

Grouped by control type, the way the demo groups them.

2D Graphs

Bars, lines, areas, splines and stacked plots, with the axis, legend, annotation and table machinery a production chart actually needs.

• Simple Graph
• Auto Statistical Subsets
• Permanent and Scrolling Subsets
• Right Y Axis Comparison Subsets
• Simple High-Low-Close
• Custom Y Axis
• Null Data Gaps
• Pixel-to-Graph Coordinate Conversion
• Point Colors
• Best Fit Coefficients
• Stacked Bar
• Multiple Sub-Titles
• Multi-Axes Subsets 1
• Multi-Axes Subsets 2
• Hot Spots
• Graph Annotations
• Date-Time Handling
• Real-Time Data Handling
• Direct Cell Writes
• Large Quantity of Data
• Rectilinear Heatmap Stacked Bar
• Hatching
• Mixing Plotting Methods per Subset
• Bitmaps and Gradients
• Background Bitmap
• Floating Stacked Bars
• Table Annotations, Simple
• Table Annotations, Stacked
• Table Annotations, Real-Time Update
• Table Annotations, Table Spaced
• Table Annotations, Hot Spots
• Subset Obstacles
• 16 Axes
• Subset Order Control
• Moveable Table
• Demographic Pyramid
• 2D Point Labels

Scientific and Engineering Charts

The scientific graph: multiple and overlapped axes, log-log scaling, double-precision data, millisecond date-time, contours, heatmaps, spectrograms and Delaunay meshes.

• Simple Scientific Graph
• Line Annotations
• Direct Cell Writes (Extended)
• Overlapped Multi-Axes 1
• Overlapped Multi-Axes 2
• Data Cursor
• Date-Time Handling
• Rect Selector
• Inverted Y Axis
• Axis Formatting
• Log-Log Axes
• Financial Scaling
• Manual Min and Max Y
• Manual Line Density
• Double-Precision Data
• Programmatic Horizontal Zooming
• Scatter Plus Data-Point Dragging
• Bubble Chart
• Custom Menus
• Partial Axes
• Vertical Y Axis Grid Numbers
• Fixed Grid Aspect
• Event-Based Custom Grid Numbers
• Multi Point Types and Colors
• Multiple Y Axes with Equally Spaced Gridlines
• Millisecond Date-Time Handling
• High-Low Area
• Error Bars
• 2D Contour Lines
• Large 2D Contour with More Colors
• Wave Data Heatmap Spectrogram
• Bitmaps as Symbols
• Second Contour Legend
• Delaunay Chart
• Angled Text Annotation Justifications

Real-Time

The three real-time shapes: append and autoscale, append against a pinned axis, and overwrite-in-place with a moving write head. Plus the full-replacement case, where every point is new on every frame.

• Real-Time 1 - full data replacement, 400,000 points per update
• Real-Time 2 - append and autoscale
• Real-Time 3 - append against a manual axis
• Real-Time 4 - overwrite in place with a write-head marker

Polar and Smith Charts

Polar, bi-polar, rose and Smith charts - the RF and antenna work most JavaScript libraries do not attempt at all.

• Simple Polar Chart
• Custom Polar Grid
• Bi-Polar Grid
• Smith Chart
• Rose Chart
• Fancy Tick Marks
• Polar Annotations

Pie Charts

Exploded slices, optional legends and hatching.

• Simple Pie Chart
• Exploded Slices
• Optional Legend
• Hatching

Then what

• The walkthrough — build one of these from nothing in about ten minutes.
• How ProEssentialsJS compares — against Highcharts, SciChart.js, LightningChart JS and the rest.
• PE-Query — ask for the property you need and get an answer validated against the compiled engine.
• Licensing — free for commercial use under $250K revenue, redistribution included, no watermark.
• Ask us anything — support is free, unlimited, and answered by the people who wrote the engine.