Exploring Financial Chart Performance: A Comparative Analysis

μPlot - A small (~45 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed)

When it comes to charting libraries, speed and efficiency are paramount considerations. Among the myriad options available, μPlot emerges as a standout contender. As a fast and memory-efficient Canvas 2D-based charting solution, μPlot excels in plotting various data types, including time series, lines, areas, OHLC (open-high-low-close), and bars. Its impressive performance is evident from its ability to generate an interactive chart containing 150,000 data points in just 90 milliseconds from a cold start. Furthermore, its scalability is noteworthy, achieving approximately 31,000 points per millisecond in a linear fashion. Beyond its rapid initial rendering, μPlot distinguishes itself with unparalleled zooming and cursor responsiveness, outperforming its competitors in this aspect.

Moreover, despite its remarkable speed, μPlot maintains a compact footprint, weighing in at around 50 KB. This makes it likely the smallest and fastest time series plotter available that doesn't rely on context-limited WebGL shaders or WebAssembly (WASM), which typically incur higher startup costs and larger code sizes.

For benchmarking purposes, a demonstration featuring 166,650 data points is accessible at the following link: 166,650 point benchmark.

However, while μPlot excels in many scenarios, it may face limitations when tasked with delivering sustained 60 frames per second (fps) performance, particularly with massive streaming datasets. In such cases, it's important to optimize the rendering pipeline. For real-time signal or waveform visualizations necessitating consistent high performance, WebGL remains the preferred tool. Alternative solutions include danchitnis/webgl-plot, huww98/TimeChart, epezent/implot, or commercial products like LightningChart®.

Features

• Multiple series w/toggle
• Multiple y-axes, scales & grids
• Temporal or numeric x-axis
• Linear, uniform or logarithmic scales
• Line & Area styles (stroke, fill, width, dash)
• Pluggable path renderers linear, spline, stepped, bars
• Zoom with auto-rescale
• Legend with live values
• Support for IANA Time Zone Names & DST
• Support for missing data
• Cursor sync for multiple charts
• Focus closest series
• Data streaming (live update)
• High / Low bands
• A lean, consistent, and powerful API with hooks & plugins

In order to stay lean, fast and focused the following features will not be added:

• No data parsing, aggregation, summation or statistical processing - just do it in advance. e.g. https://simplestatistics.org/, https://github.com/leeoniya/uDSV
• No transitions or animations - they're always pure distractions.
• No collision avoidance for axis tick labels, so may require manual tweaking of spacing metrics if label customization significiantly increases default label widths.
• No stacked series: see "Stacked Area Graphs Are Not Your Friend" and a horrific demo. While smooth spline interpolation is available, its use is strongly discouraged: Your data is misrepresented!. Both visualizations are terrible at accurately communicating information.
• No built-in drag scrolling/panning due to ambiguous native zoom/selection behavior. However, this can be added externally via the plugin/hooks API: zoom-wheel, zoom-touch.

Benchmarks done on this hardware:

• Date: 2023-03-11
• AMD Ryzen 7 PRO 5850U @ 1.9GHz, 32GB RAM
• EndeavourOS/Arch (KDE/Plasma), Chrome 113.0.5638.0 (64-bit)
• 4K display scaled to 1440p (1.5 devicePixelRatio)

| lib                    | size    | done    | js,rend,paint,sys | heap peak,final | mousemove (10s)     |
| ---------------------- | ------- | ------- | ----------------- | --------------- | ------------------- |
| uPlot v1.6.24          | 47.9 KB |   34 ms |   51   2   1   34 |  21 MB   3 MB   |  218  360  146  196 |
| Chart.js v4.2.1        |  254 KB |   38 ms |   90   2   1   40 |  29 MB  10 MB   | 1154   46  165  235 |
| Flot v3.0.0            |  494 KB |   60 ms |  105   5   1   52 |  41 MB  21 MB   | ---                 |
| ECharts v5.4.1         | 1000 KB |   55 ms |  148   3   1   35 |  17 MB   3 MB   | 1943  444  203  208 |
| dygraphs v2.2.1        |  132 KB |   90 ms |  163   2   1   33 |  88 MB  42 MB   | 1438  371  174  268 |
| LightningChart® v4.0.2 | 1300 KB |  --- ms |  250   2   1   33 |  33 MB  13 MB   | 5390  120  128  325 |
| CanvasJS v3.7.5        |  489 KB |  130 ms |  266   4   1   35 |  98 MB  69 MB   | 1030  445   90  246 |
| dvxCharts v5.1.0       |  373 KB |  160 ms |  264  23   1   62 | 100 MB  61 MB   |  687  779  206  197 |
| Highcharts v10.3.3     |  413 KB |  --- ms |  416   7   1   38 |  97 MB  55 MB   | 1286  824  205  242 |
| Plotly.js v2.18.2      | 3600 KB |  310 ms |  655  14   1   40 | 104 MB  70 MB   | 1814  163   25  208 |
| ApexCharts v3.37.1     |  503 KB |  685 ms |  694   9   1   33 | 175 MB  46 MB   | 1708  421  106  207 |
| ZingChart v2.9.10      |  871 KB |  681 ms |  717   7   1  105 | 290 MB 195 MB   | 9021  305   41   71 |
| amCharts v5.3.7        |  625 KB |  --- ms | 1601   3   3   46 | 147 MB 121 MB   | 9171   71  460  167 |

Full size: https://leeoniya.github.io/uPlot/demos/multi-bars.html

Raw data: https://github.com/leeoniya/uPlot/blob/master/bench/results.json

Source: https://github.com/leeoniya/uPlot

Headline image: Google Finance - MDKA Mar 28, 4:40:00 PM