chartai

tiny package big performance

Playground

Charts

Base

All chart types in simple form

Bar Chart 25 points
Line Chart 1,000 points
Scatter Chart 5,000 points
Area Chart 1,000 points
Candlestick 500 OHLC

Multi-Series Charts

Same charts with 3 series each

Bar Chart 25 points × 3 series
Line Chart 1,000 points × 3 series
Scatter Chart 5,000 points × 3 series
Area Chart 1,000 points × 3 series

Data Spikes

High-frequency data with extreme volatility

Spiky Line Chart 100,000 points

Live Data Updates

Real-time data streaming at configurable speeds

Points: 100 (Ring Buffer)
Live Line Streaming
Live Scatter Streaming
Live Line 2 Streaming

Big Data

Massive datasets for performance testing

Ready
Big Data Line Not generated
Big Data Scatter Not generated

Big Data Series

Extreme multi-series performance test

Ready
Massive Multi-Series Line Not generated

Step Chart

Right-angle step interpolation. Three modes: after (step at right), before (step at left), center (step at midpoint)

afterStep at right edge
beforeStep at left edge
centerStep at midpoint

Histogram

GPU-binned frequency distribution from continuous data. Auto-bins to chart width; configurable binCount, minValue, maxValue

Normal Distribution10,000 samples
Multi-Series3 distributions
SkewedLog-normal

Heatmap

2D color grid. Series x[]=column, y[]=row, value[]=intensity (0–1). Four built-in color scales

Viridis12×12 grid
Plasma12×12 grid
Warm12×12 grid
Cool12×12 grid

Bubble Chart

Scatter + size encoding. Series requires r[] extra array for per-point radius in data units

Bubble Chart300 points, variable radius
Multi-Series Bubbles3 clusters

Baseline Area

Area filled above/below a configurable Y baseline with separate positive/negative colors. Ideal for P&L, deviation charts

P&L (baseline: 0)Green above, red below
Temperature DeviationCustom baseline + colors

Error Band

Central line with shaded confidence band between lo[] and hi[] extra arrays. Use for model uncertainty, Bollinger bands, prediction intervals

Confidence IntervalWidening uncertainty
Bollinger Bands±2σ rolling window

OHLC Chart

Classic open-high-low-close tick marks: vertical stick for range, left tick for open, right tick for close. Shares the same data format as candlestick

OHLC Ticks500 bars
Candlestick (same data)For comparison

Waterfall Chart

Sequential cumulative bars showing contribution of each value. Pass total:[] extra array to mark reset-to-zero summary bars

Quarterly BridgeRevenue breakdown
P&L BridgeWith totals

Plugins

Legend

defaultOpen, alwaysOpen, maxLabelChars

Defaultlegend: {}
defaultOpenStarts open
alwaysOpenNo close
12 seriesScroll

Labels

textColor, labelSize, gridColor

Default
labelSize: 10
gridColor: accent

Zoom

zoomMode: both | x-only | y-only | none

bothPan & zoom
x-onlyHorizontal
y-onlyVertical
noneDisabled

Hover

showTooltip, formatX, formatY, pillDecayMs

showTooltip: true
showTooltip: false

Annotations

Reference lines and shaded regions at data values. Types: hline, vline, hregion, vregion — each with optional label, color, dash pattern

hline + vlineSupport/resistance + event
hregion + vregionZone fills
CombinedAll annotation types
InteractiveAdd/remove annotations dynamically

Threshold

Colored fill bands above/below configurable Y thresholds with labeled lines. Highlight danger zones, targets, or alert levels

Alert ZonesfillAbove + fillBelow
Target LineSingle threshold

Crosshair

Lightweight cursor guide lines with no snapping or tooltip overhead. Configurable axes, color, and dash pattern

X + YBoth axes
X onlyVertical guide
Custom styleColor + dash

Watermark

Semi-transparent text drawn behind the GPU chart layer. Configurable position, opacity, font size, and rotation

Center (diagonal)Default −30° rotation
Corner positionstop-right + bottom-left
High opacitywatermarkOpacity: 0.18

Stats

Live DOM panel showing min/max/mean/σ for the currently visible data window. Updates on every pan/zoom

top-left panelPan/zoom to update
top-right panelMulti-series aggregate

Ruler

Click "Ruler" button to activate, then click two points to measure. Right-click or click near an endpoint to remove. Press Escape to cancel.

X-axis measurementrulerAxis: "x"
Y-axis measurementrulerAxis: "y"
Both axesrulerAxis: "both"

Tooltip Pin

Click to pin a floating tooltip at any data point. Up to 5 pins persist through pan/zoom. Click near a pin to remove it

Click to pin pointsUp to 5 simultaneous pins
Multi-series pinsColor-coded per series

Minimap

Corner viewport thumbnail showing full data with a highlighted rectangle for the current view. Click thumbnail to jump to that region

bottom-right (default)Click thumbnail to jump
top-leftminimapPosition: top-left

Range Selector

Mini overview canvas appended below the chart. Drag the brush window to pan/zoom the main chart. Resize brush edges to zoom

Range SelectorDrag brush to navigate · resize edges to zoom