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

README.md

📈 μPlot

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


🚧 NOTICE 🚧

μ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)

  • 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
  • Cursor sync across multiple charts
  • Data streaming (live update)

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

Bench Demo Size (min) Render (167k) Total JS Heap Interact (10s)
uPlot 10 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
Chartist.js -- -- -- -- --
C3.js (d3-based) -- -- -- -- --
dc.js (d3-based) -- -- -- -- --
Plotly (d3-based) -- -- -- -- --
MetricsGraphics (d3-based) -- -- -- -- --

Acknowledgements

You can’t perform that action at this time.