Guide · Open source
How to use uPlot: install, draw a time series chart and tips
Updated · written with AI from the project's own documentation and checked against our catalogue data
uPlot is a small JavaScript chart library that draws time series, line, area, OHLC and bar charts on the HTML canvas. It is aimed at web developers who need fast charts with large datasets or live-updating data. This guide explains what uPlot is good at, how to get the code, the features you can use, and where it falls short, so you can decide whether it fits your project.
uPlotleeoniya/uPlot · ★ 10.6k · MIT Install options & downloads Quick start
- 1Get the source. Clone the repository with git clone https://github.com/leeoniya/uPlot as shown in the README.
- 2Read the concept docs. Open /docs/README.md for an overview of how uPlot works.
- 3Check the API types. Use the comments in /dist/uPlot.d.ts to see the full set of options.
- 4Pick a demo that matches your need. Find the closest runnable demo for zoom, streaming, stacking or sync and adapt it to your data.
- 5Set up your series and axes. Define your time or numeric x-axis, your series and your y-axes in the options you pass to the chart.
- 6Test with your real data size. Load a dataset close to your production size and check render time and memory before you commit.
What uPlot is and who it suits
uPlot is built on the browser's Canvas 2D drawing API. Its README describes it as a fast, memory-efficient chart for time series, lines, areas, OHLC and bars, and says the minified build is about 50 KB.
The README says it is designed to render large datasets quickly. It also says that live streaming at 60fps works in most cases, but the library may struggle with more than about 100k points in view.
- Good fit: web developers who need a fast chart for large time series data
- Good fit: dashboards that update with streamed data
- Good fit: apps where a small download size matters
- Good fit: projects that need zoom and cursor sync across several charts
- Poor fit: people who want a ready-made chart with no coding
Get the uPlot code
The README lists the install method as a package manager and does not list any prerequisites. The only install command it shows is a git clone of the repository, so start there.
The README points to /docs/README.md for a conceptual overview and to /dist/uPlot.d.ts for API comments. It describes the docs as a work in progress, so the demos are often the fastest reference.
git clone https://github.com/leeoniya/uPlotKnow the built-in features
uPlot supports multiple series with a toggle, multiple y-axes, scales and grids, and temporal or numeric x-axes. It offers linear, uniform and logarithmic scales, and line or area styles with stroke, fill, width and dash options.
Interaction features include zoom with auto-rescale, a legend with live values, a closest-series focus cursor, and cursor sync across multiple charts. Time zone support uses IANA time zone names with DST handling.
- Multiple series with toggle and multiple y-axes
- Temporal or numeric x-axis with IANA time zones and DST
- Linear, uniform or logarithmic scales
- Line paths: linear, spline, stepped and bars
- Zoom with auto-rescale and a legend with live values
- Cursor sync, focus closest series, data streaming, high/low bands
- Positive and negative stacking groups through opts.stack.groups
- Hooks and plugins for extending behaviour
Understand what uPlot does not include
The README lists several things the library will not add. It does no general data parsing, aggregation or statistics, and it has no transitions or animations. Axis tick labels have no collision avoidance, so you may need to tune spacing if your labels are wide.
Drag panning is not built in. The README says it can be added through the plugin and hooks API, and it links to zoom-wheel and zoom-touch demos as examples. Smooth spline interpolation exists but the README strongly discourages using it.
- No general-purpose data parsing, aggregation or statistical processing
- No transitions or animations
- No built-in drag scrolling or panning
- No collision avoidance for axis tick labels
- No 3D or WebGL-style rendering; the README points to other libraries for that
Choose uPlot for performance-heavy charts
The README's benchmarks use a 2023 test machine and Chrome. They report that uPlot can create an interactive chart with 166,650 points in 25ms from a cold start. The README says these are its own benchmark results, so check them against your own data and hardware.
In the same README table, uPlot's download size is about 47.9 KB, compared with 254 KB for Chart.js 4 and 1000 KB for ECharts 5. Under the streaming test, the README reports lower CPU and memory use than Chart.js and ECharts. If you have very high point counts, the README suggests reducing the update frequency or looking at WebGL or WebGPU libraries.
What people use it for
- Plotting long sensor or log time series in a web dashboard
- Streaming live metrics into a chart that updates several times per second
- Showing candlestick-style OHLC or bar data for price or throughput
- Linking several charts so that hovering one moves the cursor on all of them
Frequently asked questions
Is uPlot free to use?
uPlot is released under the MIT licence, as stated in the README. The source does not describe any paid tier.
How do I install uPlot?
The README lists the install method as a package manager, but the only install command it gives is git clone https://github.com/leeoniya/uPlot. Check the repository docs in /docs/README.md for any further setup steps.
Does uPlot need any prerequisites?
The README does not list any prerequisites. It does say that uPlot is a JavaScript library that draws on the browser's Canvas 2D API.
Can uPlot pan charts by dragging?
Not out of the box. The README says drag panning is not included and can be added through the plugin and hooks API, with zoom-wheel and zoom-touch demos as examples.
How does uPlot compare to Chart.js or ECharts?
The README reports that uPlot is much smaller, about 47.9 KB against 254 KB for Chart.js 4 and 1000 KB for ECharts 5, and that it uses less CPU and memory in its streaming test. Those numbers come from the README's own benchmark, so test with your data. Chart.js and ECharts offer more ready-made chart types and more built-in features.
What is the point limit for live charts?
The README says uPlot can live-stream at 60fps in most cases but may begin to struggle beyond 100k in-view points. For heavier needs it suggests reducing update frequency or using a WebGL or WebGPU library.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
uPlot suits web developers who need a small, fast canvas chart for time series, especially with large datasets, live streams or linked charts. It is not a good choice if you want a no-code chart, built-in drag panning, 3D rendering or very large live views above about 100k points, where Chart.js, ECharts or a WebGL library may serve you better.
Install options & downloads