Skip to content
📈 An exceptionally fast, tiny time series & line chart
JavaScript HTML CSS
Branch: master
Clone or download

README.md

📈 μPlot

An exceptionally fast, tiny (< 15 KB min) time series & line chart (MIT Licensed)


Introduction

μPlot is a fast, memory-efficient time series & line chart based on Canvas 2D; from a cold start it can create an interactive chart containing 150,000 data points in 40ms, scaling linearly at ~4,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 < 15 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


uPlot Chart


🚧 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


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 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/4o0ge9wx/

<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.Line(opts, data);

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

Documentation

WIP: https://github.com/leeoniya/uPlot/issues/48


Performance

Benchmarks done on a ThinkPad T480S:

  • Windows 10 x64, Chrome 78.0.3904.70
  • Core i5-8350U @ 1.70GHz, 8GB RAM
  • Intel HD 620 GPU, 2560x1440 res
Bench Demo Size (min) Render (167k) Total Mem (peak) Mem (retained) Interact (10s)
uPlot 15 KB 39 ms 71 ms 19.6 MB 3.7 MB 154 ms
Flot 2,606 KB 130 ms 190 ms 42.7 MB 17.3 MB --
dygraphs 121 KB 168 ms 251 ms 113 MB 66.0 MB 2569 ms
CanvasJS 448 KB 295 ms 414 ms 49.2 MB 39.1 MB 2401 ms
jqChart 270 KB 450 ms 577 ms 142 MB 99.9 MB 600 ms
ECharts 734 KB 513 ms 765 ms 179 MB 118.8 MB 2194 ms
Highcharts 270 KB 573 ms 717 ms 71.7 MB 40.7 MB 1122 ms
Chart.js 153 KB 653 ms 741 ms 117 MB 78.9 MB 5408 ms
ApexCharts 430 KB 1269 ms 2441 ms 142 MB 157.9 MB 7559 ms
ZingChart 682 KB 2324 ms 2518 ms 220 MB 175.7 MB --
amCharts 1,034 KB 6514 ms 6730 ms 397 MB 430.0 MB 7539 ms
Chartist.js -- -- -- -- -- --
C3.js (d3-based) -- -- -- -- -- --
dc.js (d3-based) -- -- -- -- -- --
Plotly (d3-based) -- -- -- -- -- --
MetricsGraphics (d3-based) -- -- -- -- -- --
rickshaw (d3-based) -- -- -- -- -- --

Acknowledgements

You can’t perform that action at this time.