@xchart/core NPM

@xchart/core

A small (~60 KB min), fast chart for time series, lines, areas, ohlc & bars.

Inspired by uPlot

Introduction

xchart 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 135ms, scaling linearly at ~25,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 ~60 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.

xchart Chart

Features

Write in Typescript 🚀
Multiple series w/toggle
Multiple y-axes, scales & grids
Temporal or numeric x-axis
Linear, uniform or logarithmic scales
Line & Area styles (stroke, fill, width, dash)
Pluggable path renderers linear, spline, stepped, bars
Zoom with auto-rescale
Legend with live values
Tooltip options
Support default chart type: line, bar, scatter
Mouse wheel zoom
Theme
Support for IANA Time Zone Names & DST
Support for missing data
Cursor sync for multiple charts
Focus closest series
Data streaming (live update)
High / Low bands
A lean, consistent, and powerful API with hooks & plugins

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 collision avoidance for axis tick labels, so may require manual tweaking of spacing metrics if label customization significantly increases default label widths.
No stacked series: see "Stacked Area Graphs Are Not Your Friend" and a horrific demo. While smooth spline interpolation is available, its use is strongly discouraged: Your data is misrepresented!. Both visualizations are terrible at accurately communicating information.