gpsbird / uplot Goto Github PK

A small (< 25 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed)

μPlot is a fast, memory-efficient Canvas 2D-based chart for plotting time series, lines, areas, ohlc & bars; from a cold start it can create an interactive chart containing 150,000 data points in 135ms, scaling linearly at ~25,000 pts/ms. In addition to fast initial render, the zooming and cursor performance is by far the best of any similar charting lib; at < 25 KB, it's likely the smallest and fastest time series plotter that doesn't make use of context-limited WebGL shaders or WASM, both of which have much higher startup cost and code size.

However, if you're looking for true real-time 60fps performance with massive datasets, uPlot can only get you so far. WebGL should still be the tool of choice for applications like realtime signal or waveform visualizations: Try danchitnis/webgl-plot or huww98/TimeChart.

• 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)
• 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://www.papaparse.com/
• No transitions or animations - they're always pure distractions.
• No DOM measuring; uPlot does not know how much space your dynamic labels & values will occupy, so requires explicit sizing and/or some CSS authoring.
• No stacked series or line smoothing. See links for how these are each terrible at actually communicating information. While neither will be part of the core, uPlot's API makes it easy to implement both: stacked-series, line-smoothing.
• No built-in drag scrolling/panning. Maintaining good perf with huge datasets would require a lot of extra code & multiple <canvas> elements to avoid continuous redraw and rescaling on each dragged pixel. If you have fewer than tens of thousands of datapoints, you can use uPlot's API to implement smooth zooming or panning. e.g. zoom-wheel, zoom-touch. Pagination of data also works well.

The docs are a work in progress: https://github.com/leeoniya/uPlot/tree/master/docs

An outline of the API can be found in issue #48. For the time being, visit the ever-expanding collection of /demos which covers the vast majority of uPlot's config & API.

Benchmarks done on a ThinkPad T480S:

• Windows 10 x64, Chrome 83.0.4103.24 (Official Build) (32-bit)
• Core i5-8350U @ 1.70GHz, 8GB RAM
• Intel HD 620 GPU, 2560x1440 res

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

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

| lib            | size    | done    | js,rend,paint,sys | heap peak,final | interact (10s)      |
| -------------- | ------- | ------- | ----------------- | --------------- | ------------------- |
| uPlot          |   24 KB |   68 ms |   93   3   3   74 |  16 MB   3 MB   |  245  434  136  263 |
| Chart.js-next  |  253 KB |  241 ms |  299   3   3   94 |  35 MB  28 MB   | 3029   35   96 6704 |
| dygraphs       |  125 KB |  199 ms |  263   6   4  177 |  64 MB  47 MB   | 2610  268  331  441 |
| Flot           |  494 KB |  325 ms |  210   8   5  290 |  25 MB  24 MB   | ---                 |
| CanvasJS       |  459 KB |  347 ms |  424   4   3  113 |  37 MB  26 MB   | 2499  561  346  456 |
| LightningChart |  924 KB |  --- ms |  600   5   4   89 |  39 MB  13 MB   | 9534   34   56  119 |
| jqChart        |  280 KB |  509 ms |  654   7   6  106 |  92 MB  53 MB   | 1277  400  300  369 |
| Highcharts     |  292 KB |  --- ms |  746   8   2   72 |  46 MB  30 MB   | 2102  778  200  290 |
| Chart.js       |  245 KB |  695 ms |  755   7   6  185 |  78 MB  78 MB   | 6230    4   10 3009 |
| Plotly.js      | 3400 KB |  492 ms |  884  11   2   90 |  51 MB  48 MB   | 1676  242   61  234 |
| ECharts        |  752 KB |  --- ms |  777   5  11 1132 | 120 MB  81 MB   | 2425   60   54 7650 |
| ApexCharts     |  458 KB |  --- ms | 2357  31  69   64 | 162 MB  96 MB   | 2179  219 7806   59 |
| ZingChart      |  699 KB | 2720 ms | 2992   8   1   65 | 202 MB 119 MB   | ---                 |
| amCharts       | 1200 KB | 6700 ms | 6704  49  25   99 | 268 MB 268 MB   | 6700 1414 1183  505 |

• size includes the lib itself plus any dependencies required to render the benchmark, e.g. Moment, jQuery, etc.
• Flot does not make available any minified assets and all their examples use the uncompressed sources; they also use an uncompressed version of jQuery :/

TODO (all of these use SVG, so performance should be similar to Highcharts):

• Chartist.js
• d3-based
  • C3.js
  • dc.js
  • MetricsGraphics
  • rickshaw

• Dan Vanderkam's dygraphs was a big inspiration; in fact, my stale pull request #948 was a primary motivator for μPlot's inception.
• Adam Pearce for #15 - remove redundant lineTo commands.