uPlot README

The project's README from github.com/leeoniya/uPlot. As one markdown file: README.md.

uPlot logo μPlot

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

Introduction

uPlot 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 166,650 data points in 25ms, scaling linearly at ~100,000 pts/ms afterwards. In addition to fast initial render, the zooming and cursor performance is by far the best of any similar charting lib; at ~50 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.

In most sane cases, you can live-stream data with uPlot at 60fps, though it may begin to struggle beyond 100k in-view points. When updating 3,600 points at 60fps, uPlot uses 10% CPU and 12.3MB RAM. The next fastest Canvas-based libs (Chart.js and ECharts) use 40% / 77MB and 70% / 85MB, respectively. If you need to stream, give unclog your rendering pipeline a try. If that does not help, consider reducing the update frequency or switch to a WebGL/WebGPU solution, like danchitnis/webgl-plot, huww98/TimeChart, epezent/implot.

uPlot Chart

Features

Non-Features

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

Documentation (WIP)

The docs are a perpetual work in progress, it seems. Start with /docs/README.md for a conceptual overview. The full API is further documented via comments in /dist/uPlot.d.ts. Additionally, an ever-expanding collection of runnable /demos covers the vast majority of uPlot's API.

Third-party Integrations

Performance

Benchmarks done on this hardware:

uPlot Performance

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 | 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 |

Some libraries provide their own performance demos:

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

Unclog your rendering pipeline

Your browser's performance is highly dependent on your hardware, operating system, and GPU drivers.

If you're using a Chromium-based browser, there are some hidden settings that can unlock significant performance improvements for Canvas2D rendering. Most of these have to do with where and how the rasterization is performed.

Head over to https://leeoniya.github.io/uPlot/demos/sine-stream.html and open up Chrome's DevTools (F12), then toggle the Performance Monitor.

Chrome DevTools Peformance Monitor

For me:

If your CPU is close to 100%, it may be rasterizing everything in the same CPU process.

Pop open chrome://gpu and see what's orange or red.

Chrome gpu

Then open chrome://flags and search for "raster" to see what can be force-enabled.

Chrome flags

YMMV!

Acknowledgements

uPlot (leeoniya/uPlot)

Searching Database…

10.6K ·GitHub
UPlot
Что это такое?uPlot — это небольшая (около 50 КБ в минифицированном виде), быстрая JavaScript-библиотека для построения графиков под лицензией MIT. Она предназначена для временных рядов, линейных графиков, графиков с областями, свечных (OHLC) и столбчатых диаграмм и рисует всё на Canvas 2D прямо в браузере.
Это библиотека, которую я подключаю к своей странице, или онлайн-сервис для графиков?Это клиентская библиотека, которую вы подключаете к веб-странице и управляете ею через API; всё рисуется на Canvas 2D в браузере, никакой сервер не нужен.
Как подключить её к проекту и насколько хороша документация?Ничего устанавливать или размещать не нужно — достаточно подключить библиотеку к странице. Документация, честно говоря, ещё в процессе разработки: начните с /docs/README.md, чтобы понять общую идею, почитайте комментарии к API в файле /dist/uPlot.d.ts и учитесь на работающих примерах из /demos.
А есть вещи, которые она принципиально не умеет?Да, это сделано намеренно: нет разбора данных, агрегации и статистики (данные готовьте заранее), нет переходов и анимаций, нет накопительных (stacked) серий, нет защиты от наложения подписей осей, а перетаскивание графика мышью доступно только через плагины zoom-wheel/zoom-touch.
Почему автор создал uPlot, вместо того чтобы улучшить dygraphs?У него в репозитории dygraphs Дэна Вандеркама (Dan Vanderkam) «висел» заброшенный пул-реквест (#948), и именно этот заброшенный PR стал главным поводом для создания uPlot; dygraphs при этом упоминается как источник вдохновения.
uPlot использует WebGL или WebGPU ради скорости?Нет. Это чистый Canvas 2D — автор считает именно это причиной маленького размера и быстрого запуска. Если для потоковых данных возможностей Canvas перестанет хватать, предлагаются варианты на WebGL/WebGPU: webgl-plot, TimeChart и ImPlot.
Может ли она рисовать плавные сплайны и графики с накоплением?Интерполяция сглаженными сплайнами есть в виде подключаемого рендерера путей, но README настоятельно не рекомендует её использовать, потому что она искажает ваши данные. А накопительные (stacked) серии добавляться не будут вообще.
What are similar projects?apexcharts.js, Chart.js, bokeh, lightweight-charts, charts, d3, sigma.js, G2
Which topics is it in?graphs, plotting, charting-library, chart, time-series, zero-dependency, graph, realtime, plugins, interactive, charts, canvas
Creator
leeoniya
Size
12.3 MB
Stars
10.6K
Updated
CommitOct 17Release1.6.32Mar 14
Age
7y
Commits · 90 Days