An exceptionally fast, tiny (~7 KB min) time series chart (MIT Licensed)
μPlot is a very fast and memory-efficient time series chart based on Canvas 2D; from a cold start it can create an interactive chart containing 150,000 data points in 50ms. In addition to fast initial render, the zooming and cursor performance is by far the best of any similar charting lib; at ~7 KB (min), it's likely the smallest and fastest time series plotter that doesn't make use of WebGL shaders or WASM, both of which have much higher startup cost and code size.
166,650 point bench: https://leeoniya.github.io/uPlot/bench/uPlot.html
- Multiple series
- Line styles (color, width, dash)
- Multiple y-axes & grids
- Zooming with auto-rescale
- Support for gaps in data
- Legend with live values
- Toggle series on/off
- Crosshair cursor
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 validation of inputs or helpful error messages - study the examples, read the docs.
- 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 area fills, stacked series or line smoothing. See links for how these are each terrible at actually communicating information.
- Probably no 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. However, since uPlot's performance allows rendering of very wide canvases, they can be scrolled naturally with CSS'soverflow-x: autoapplied to a narrower containing element. Pagination of data also works well.
Example: https://jsfiddle.net/v439aL1k/
<link rel="stylesheet" href="src/uPlot.css">
<script src="dist/uPlot.iife.min.js"></script>
<script>
const data = [
[1566453600, 1566457260, 1566460860, 1566464460], // Unix timestamps
[0.54, 0.15, 3.27, 7.51 ], // CPU
[12.85, 13.21, 13.65, 14.01 ], // RAM
[0.52, 1.25, 0.75, 3.62 ], // TCP Out
];
const opts = {
width: 800,
height: 400,
cursor: true,
series: {
x: {
data: data[0],
},
y: [
{
label: "CPU",
data: data[1],
scale: "%",
value: v => v.toFixed(1) + "%",
color: "red",
width: 2,
dash: [10, 5],
},
{
label: "RAM",
data: data[2],
scale: "%",
value: v => v.toFixed(1) + "%",
color: "blue",
},
{
label: "TCP Out",
data: data[3],
scale: "mb",
value: v => v.toFixed(2) + "MB",
color: "green",
}
],
},
axes: {
y: [
{
scale: '%',
values: (vals, space) => vals.map(v => +v.toFixed(1) + "%"),
},
{
side: 3,
scale: 'mb',
values: (vals, space) => vals.map(v => +v.toFixed(2) + "MB"),
grid: null,
},
],
},
};
let uplot = new uPlot(opts);
document.body.appendChild(uplot.root);
</script>| Bench Demo | Size (min) | Render (167k) | Total | JS Heap | Interact (10s) |
|---|---|---|---|---|---|
| uPlot | 7 KB | 50 ms | 85 ms | 20 MB | 254 ms |
| Flot | 2,606 KB | 139 ms | 224 ms | 46.2 MB | -- |
| dygraphs | 121 KB | 195 ms | 287 ms | 113 MB | 2019 ms |
| CanvasJS | 448 KB | 367 ms | 396 ms | 81.7 MB | 3418 ms |
| jqChart | 270 KB | 525 ms | 648 ms | 100 MB | 588 ms |
| ECharts | 734 KB | 570 ms | 850 ms | 176 MB | -- |
| Highcharts | 270 KB | 621 ms | 777 ms | 72.8 MB | 1275 ms |
| Chart.js | 153 KB | 1430 ms | 1505 ms | 134 MB | 7217 ms |
| ApexCharts | 430 KB | 1440 ms | 2794 ms | 165 MB | 7644 ms |
| ZingChart | 682 KB | 2585 ms | 2812 ms | 206 MB | -- |
| amCharts | 1,034 KB | 5134 ms | 5174 ms | 368 MB | 3516 ms |
- Dan Vanderkam's dygraphs was a big inspiration; in fact, my stale pull request #948 was a primary motivator for μPlot's inception.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
