cuulee / uplot

📈 An exceptionally fast, tiny time series chart

📈 μPlot

An exceptionally fast, tiny (~10 KB min) time series chart (MIT Licensed)

---

Introduction

μPlot is a fast, 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 40ms. In addition to fast initial render, the zooming and cursor performance is by far the best of any similar charting lib; at ~10 KB, 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

---

---

🚧 UNDER CONSTRUCTION 🚧

2019-10-24: μPlot is now mostly feature-complete and its declarative opts API is in pretty good, future-accommodating shape. Its imperative API, docs and additional examples are still in progress.

v1.0 and API stabilization are loosely targetted for sometime before 2020-01-01. Until then, feedback, feature suggestions and real use-cases can be submitted to the issue tracker for consideration & further discussion.

---

Features

• Multiple series w/toggle
• Multiple y-axes, scales & grids
• Temporal or numeric x-axis
• Line styles (color, width, dash)
• Zoom with auto-rescale
• Legend with live values
• Support for missing data
• Cursor sync for multiple charts
• Data streaming (live update)
• High / Low bands

---

Non-Features

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 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's overflow-x: auto applied to a narrower containing element. Pagination of data also works well.

---

Usage & API

Example: https://jsfiddle.net/oh0xtzn5/

<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,
        series: {
            y: [
                {
                    label: "CPU",
                    scale: "%",
                    value: v => v.toFixed(1) + "%",
                    color: "red",
                    width: 2,
                    dash: [10, 5],
                },
                {
                    label: "RAM",
                    scale: "%",
                    value: v => v.toFixed(1) + "%",
                    color: "blue",
                },
                {
                    label: "TCP Out",
                    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, data);

    document.body.appendChild(uplot.root);
</script>

---

Performance

Benchmarks were done on:

• Windows 10 x64, Chrome 77.0.3865.120
• Core i5-7500T @ 2.70GHz, 8GB RAM
• Intel HD 630 GPU, 1920x1080 res

Bench Demo	Size (min)	Render (167k)	Total	JS Heap	Interact (10s)
uPlot	10 KB	37 ms	80 ms	17.3 MB	216 ms
Flot	2,606 KB	138 ms	213 ms	41.5 MB	--
dygraphs	121 KB	190 ms	272 ms	119 MB	1930 ms
CanvasJS	448 KB	329 ms	423 ms	50.8 MB	4001 ms
jqChart	270 KB	496 ms	662 ms	129 MB	538 ms
ECharts	734 KB	583 ms	880 ms	176 MB	2259 ms
Highcharts	270 KB	629 ms	792 ms	61.6 MB	1257 ms
Chart.js	153 KB	1386 ms	1514 ms	125 MB	7116 ms
ApexCharts	430 KB	1452 ms	2740 ms	155 MB	7559 ms
ZingChart	682 KB	2566 ms	2785 ms	222 MB	--
amCharts	1,034 KB	8596 ms	9120 ms	425 MB	3248 ms
Chartist.js	--	--	--	--	--
C3.js (d3-based)	--	--	--	--	--
dc.js (d3-based)	--	--	--	--	--
Plotly (d3-based)	--	--	--	--	--
MetricsGraphics (d3-based)	--	--	--	--	--
rickshaw (d3-based)	--	--	--	--	--

---

Acknowledgements

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