uPlot is a fast, small, and simple charting library for rendering high-performance, interactive charts in the browser. It is designed to handle large datasets efficiently and provides a minimalistic API for creating various types of charts.
Line Charts
This code demonstrates how to create a simple line chart using uPlot. The chart is configured with a title, dimensions, and a single data series with a blue stroke.
const uPlot = require('uplot');
const data = [
[0, 1, 2, 3, 4],
[3, 1, 4, 1, 5]
];
const opts = {
title: 'Line Chart',
width: 400,
height: 300,
series: [
{},
{
label: 'Data',
stroke: 'blue'
}
]
};
new uPlot(opts, data, document.body);Bar Charts
This code shows how to create a bar chart using uPlot. The chart is configured with a title, dimensions, and a single data series with red bars.
const uPlot = require('uplot');
const data = [
[0, 1, 2, 3, 4],
[3, 1, 4, 1, 5]
];
const opts = {
title: 'Bar Chart',
width: 400,
height: 300,
series: [
{},
{
label: 'Data',
fill: 'red',
paths: uPlot.paths.bars({ size: [0.6, 0.9] })
}
]
};
new uPlot(opts, data, document.body);Real-time Data Updates
This code demonstrates how to create a chart that updates in real-time using uPlot. New data points are added every second, and the chart is updated to reflect these changes.
const uPlot = require('uplot');
let data = [
[0, 1, 2, 3, 4],
[3, 1, 4, 1, 5]
];
const opts = {
title: 'Real-time Chart',
width: 400,
height: 300,
series: [
{},
{
label: 'Data',
stroke: 'green'
}
]
};
const plot = new uPlot(opts, data, document.body);
setInterval(() => {
data[0].push(data[0].length);
data[1].push(Math.random() * 10);
plot.setData(data);
}, 1000);Chart.js is a popular open-source library for creating flexible and interactive charts. It offers a wide range of chart types and is known for its ease of use and extensive documentation. Compared to uPlot, Chart.js is more feature-rich but may not perform as well with very large datasets.
D3.js is a powerful JavaScript library for creating complex and dynamic data visualizations. It provides fine-grained control over the rendering of charts and is highly customizable. While D3 offers more flexibility than uPlot, it has a steeper learning curve and requires more code to achieve similar results.
Plotly.js is a versatile library for creating interactive charts and dashboards. It supports a wide variety of chart types and is known for its interactivity and ability to handle large datasets. Compared to uPlot, Plotly.js offers more built-in features and interactivity but may be larger in size.
A small (~45 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed)
μPlot is a fast, memory-efficient Canvas 2D-based chart for plotting time series, lines, areas, ohlc & bars; from a cold start it can create an interactive chart containing 150,000 data points in 90ms, scaling linearly at ~31,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 ~50 KB, it's likely the smallest and fastest time series plotter that doesn't make use of context-limited WebGL shaders or WASM, both of which have much higher startup cost and code size.
However, if you need 60fps performance with massive streaming datasets, uPlot can only get you so far. If you decide to venture into this realm with uPlot, make sure to unclog your rendering pipeline. WebGL should still be the tool of choice for applications like realtime signal or waveform visualizations: See danchitnis/webgl-plot, huww98/TimeChart, epezent/implot, or commercial products like LightningChart®.
In order to stay lean, fast and focused the following features will not be added:
The docs are a perpetual work in progress, it seems. Start with /docs/README.md for a conceptual overview. The full API is further documented via comments in /dist/uPlot.d.ts. Additionally, an ever-expanding collection of runnable /demos covers the vast majority of uPlot's API.
Benchmarks done on this hardware:
Full size: https://leeoniya.github.io/uPlot/demos/multi-bars.html
Raw data: https://github.com/leeoniya/uPlot/blob/master/bench/results.json
| lib | size | done | js,rend,paint,sys | heap peak,final | mousemove (10s) | | ---------------------- | ------- | ------- | ----------------- | --------------- | ------------------- | | uPlot v1.6.24 | 47.9 KB | 34 ms | 51 2 1 34 | 21 MB 3 MB | 218 360 146 196 | | Chart.js v4.2.1 | 254 KB | 38 ms | 90 2 1 40 | 29 MB 10 MB | 1154 46 165 235 | | Flot v3.0.0 | 494 KB | 60 ms | 105 5 1 52 | 41 MB 21 MB | --- | | ECharts v5.4.1 | 1000 KB | 55 ms | 148 3 1 35 | 17 MB 3 MB | 1943 444 203 208 | | dygraphs v2.2.1 | 132 KB | 90 ms | 163 2 1 33 | 88 MB 42 MB | 1438 371 174 268 | | LightningChart® v4.0.2 | 1300 KB | --- ms | 250 2 1 33 | 33 MB 13 MB | 5390 120 128 325 | | CanvasJS v3.7.5 | 489 KB | 130 ms | 266 4 1 35 | 98 MB 69 MB | 1030 445 90 246 | | dvxCharts v5.1.0 | 373 KB | 160 ms | 264 23 1 62 | 100 MB 61 MB | 687 779 206 197 | | Highcharts v10.3.3 | 413 KB | --- ms | 416 7 1 38 | 97 MB 55 MB | 1286 824 205 242 | | Plotly.js v2.18.2 | 3600 KB | 310 ms | 655 14 1 40 | 104 MB 70 MB | 1814 163 25 208 | | ApexCharts v3.37.1 | 503 KB | 685 ms | 694 9 1 33 | 175 MB 46 MB | 1708 421 106 207 | | ZingChart v2.9.10 | 871 KB | 681 ms | 717 7 1 105 | 290 MB 195 MB | 9021 305 41 71 | | amCharts v5.3.7 | 625 KB | --- ms | 1601 3 3 46 | 147 MB 121 MB | 9171 71 460 167 |
size includes the lib itself plus any dependencies required to render the benchmark, e.g. Moment, jQuery, etc.Some libraries provide their own performance demos:
TODO (all of these use SVG, so performance should be similar to Highcharts):
Your browser's performance is highly dependent on your hardware, operating system, and GPU drivers.
If you're using a Chromium-based browser, there are some hidden settings that can unlock significant performance improvements for Canvas2D rendering. Most of these have to do with where and how the rasterization is performed.
Head over to https://leeoniya.github.io/uPlot/demos/sine-stream.html and open up Chrome's DevTools (F12), then toggle the Performance Monitor.
For me:
If your CPU is close to 100%, it may be rasterizing everything in the same CPU process.
Pop open chrome://gpu and see what's orange or red.
Then open chrome://flags and search for "raster" to see what can be force-enabled.
Canvas out-of-process rasterization resulted in a dramatic framerate improvement.YMMV!
FAQs
A small, fast chart for time series, lines, areas, ohlc & bars
The npm package uplot receives a total of 150,394 weekly downloads. As such, uplot popularity was classified as popular.
We found that uplot demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.
Security News
CISA’s 2025 draft SBOM guidance adds new fields like hashes, licenses, and tool metadata to make software inventories more actionable.
Security News
A clarification on our recent research investigating 60 malicious Ruby gems.