Skip to content
📈 An exceptionally fast, tiny time series chart
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bench
demos
dist
src
.editorconfig
LICENSE
README.md
package.json
rollup.config.js

README.md

📈 μPlot

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


🚧 UNDER CONSTRUCTION 🚧

μPlot is currently under heavy development, so expect to encounter missing and stale or incomplete docs/examples, unimplemented features, unhandled corner cases, and rough edges. 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.


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


Features (so far)


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,
        cursor: true,
        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

You can’t perform that action at this time.