explaingit

leeoniya/uplot

★ 10,144JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

uPlot is a tiny, blazing-fast JavaScript charting library for time series data, line, area, bar, and candlestick charts that render 166,000 data points in about 25 milliseconds on a typical laptop.

Mindmap

mindmap
  root((repo))
    What it does
      Line and area charts
      Bar and candlestick
      Live data streaming
    Performance
      48 KB file size
      166k points in 25ms
      60fps updates
    Features
      Multiple axes
      Zoom and cursor
      Logarithmic scale
    Tech Stack
      JavaScript
      Canvas API
    Use Cases
      Server metrics dashboard
      Stock price charts
      Sensor data display
    Integrations
      React wrapper
      Vue wrapper
      Svelte wrapper
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a real-time server metrics dashboard that updates 60 times per second without slowing the browser.

USE CASE 2

Add a stock price candlestick chart to a finance app that handles years of historical data without performance problems.

USE CASE 3

Display live sensor readings from IoT devices on a lightweight web page that works on low-end hardware.

USE CASE 4

Create a cryptocurrency trading interface with multiple data series and zoom on a chart that stays under 50 KB.

Tech stack

JavaScriptCanvas API

Getting it running

Difficulty · easy Time to first run · 30min
MIT license, use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

uPlot is a charting library for JavaScript that draws line charts, area charts, bar charts, and candlestick charts (the OHLC style used in financial data). Its main selling point is speed and small file size. The library weighs about 48 kilobytes, which is roughly five times smaller than Chart.js and twenty times smaller than Plotly, two popular alternatives. It can render a chart with 166,000 data points in about 25 milliseconds on a typical laptop. The library is built for time series data, meaning data measured over time like server metrics, stock prices, sensor readings, or anything where you have timestamps on one axis and values on the other. It can stream live data updates and refresh at 60 frames per second while using a fraction of the CPU and memory that comparable libraries consume. Benchmarks in the README compare it directly against Chart.js, ECharts, Highcharts, Plotly, and several others, with uPlot consistently at the top for rendering speed and memory use. Features include multiple data series on the same chart, multiple vertical axes, zoom with automatic rescaling, a cursor that tracks values across series, logarithmic scales, and support for missing data gaps. The library intentionally leaves out animations, stacked series, and automatic data processing, taking the position that those features add visual noise or should be handled before the data reaches the chart. The API is hook-based and extensible, meaning developers can add custom behavior at specific points in the rendering process. Wrappers exist for React, Vue.js, and Svelte for teams using those frameworks. There is also a Python binding for data science use. The library is MIT licensed and actively maintained. It is aimed at developers who need to display large or frequently updated datasets in a browser without performance problems.

Copy-paste prompts

Prompt 1
Using uPlot, write the minimal JavaScript to render a line chart from two arrays: one of Unix timestamps and one of numeric values.
Prompt 2
Show me how to add a second Y-axis to a uPlot chart so I can plot CPU usage and memory usage with different scales on the same canvas.
Prompt 3
Write a uPlot configuration that enables zoom, a crosshair cursor, and a logarithmic Y scale for a server latency chart.
Prompt 4
How do I push new data points into an existing uPlot instance at 60fps without recreating the chart on each update?
Prompt 5
Set up uPlot inside a React component using the community wrapper so the chart re-renders only when the data prop changes.
Open on GitHub → Explain another repo

← leeoniya on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.