jeffbarg / uPlot

An exceptionally fast, tiny time series chart

📈 μPlot

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

---

Introduction

μ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

---

Features (so far)

• 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

---

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

---

Usage & API

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>

---

Performance

Bench Demo	Size (min)	Render (167k)	Total	JS Heap	Interact (10s)
uPlot	7 KB	50 ms	85 ms	15.2 MB	254 ms
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
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

---

Acknowledgements

• Dan Vanderkam's dygraphs was a big inspiration; in fact, my stale pull request #948 was a primary motivator for μPlot's inception.