aeriz DOCS
What is aeriz?
aeriz is a canvas-rendered charting library with a single shared rendering core powering 21 chart types.
Highlights
- 21 chart types — bar, line, area, scatter, pie, radar, gauge, heatmap, treemap, and more
- Live theming via CSS variables — change colors at runtime, call invalidate(), redraws
- Pixel-perfect hit testing — events attached to canvas, no DPR confusion
- Composite chart — mix bar, line, area and scatter with dual y-axes in one call
- Realtime streaming — RealtimeChart.push() with rolling window
- State overlays — setLoading(), setEmpty(), setError(), clearState()
Quick Start
Pick the install method that fits your stack…
Drop the script tag in, then use the global window.Aeriz.
Then import:
Then import:
Then import:
CDN
The fastest way to use aeriz — no build step required.
IIFE (global window.Aeriz):
ES Module (modern browsers, native import):
@latest with a specific version tag in production for reproducible builds.
NPM / Yarn / pnpm
Recommended for projects using a bundler such as Vite, webpack, Rollup, esbuild, or Parcel.
Then in your code:
Lifecycle
Every chart goes through the same lifecycle…
Construction
Pass a container — either a CSS selector string or a DOM element — followed by an options object…
Updating data
Call setData() to swap the data with a smooth animated transition…
Cleanup
Always call destroy() when removing a chart from the page…
Theming via CSS variables
All theme tokens are CSS custom properties…
Available tokens
| Token | Fallback | Purpose |
|---|
Live re-theme example
--aeriz-color-1 through --aeriz-color-12 define the palette used to color series.
Events & Interactivity
Mouse events are attached directly to the canvas…
onClick callback shape:
States — Loading, Empty, Error
Every chart can show one of three overlay states with a single method call…
Playground
Every chart type at once. Recolor the theme on the fly, randomize data, run state transitions — all 22 charts respond live.
Live demos
Each block below renders a real chart from the live library bundle…
API Reference
Chart (base class)
Every chart class extends Chart…
| Method | Description | Returns |
|---|---|---|
new Chart(container, options) | Create a chart in container. container can be a CSS selector string or a DOM element. | Chart |
setData(data) | Replace the chart data and trigger an animated transition. | this |
setLoading(msg?) | Show the loading spinner overlay. | this |
setEmpty(msg?) | Show the empty-data overlay (default "No data"). | this |
setError(msg?) | Show the error overlay (default "Error"). | this |
clearState() | Clear any loading/empty/error overlay and return to normal render. | this |
invalidate() | Re-resolve theme and palette from CSS, clear gradient cache, redraw. | void |
destroy() | Remove canvas, observers, listeners; unschedule from the animation loop. | void |
Subclass-specific methods
| Method | Description | Class |
|---|---|---|
setValue(v) | Animate the gauge needle to a new value. | GaugeChart |
push(values) | Push a new sample (number or array of per-series numbers). Drops oldest when window is full. | RealtimeChart |
clear() | Empty the rolling window. | RealtimeChart |
Common options
These options can be passed to any chart…
| Option | Type | Default | Description |
|---|---|---|---|
data | Array | — | Primary data source. Shape varies per chart (see chart sections). |
series | Array<{name, values}> | — | Used by multi-series charts (Area, MultiLine, StackedBar, GroupedBar, Radar, Realtime). |
categories | string[] | — | Categorical x-axis labels for series-based charts. |
palette | string[] | read from CSS | Override palette colors. Falls back to --aeriz-color-N CSS vars, then to built-in PALETTE. |
onClick | (hit, point, chart) => void | — | Click callback. hit is the closest hit-tested region or null. |
label | (d, i) => string | d => d.label | Datum → label accessor. |
value | (d, i) => number | d => d.value | Datum → numeric value accessor. |
xTickFormat | (v) => string | — | Format function for x-axis tick labels. |
yTickFormat | (v) => string | — | Format function for y-axis tick labels. |
dataLabels | boolean | (d, i) => string | false | Draw value labels on data points / bars. |
Palette & math helpers
PALETTE is the default 12-color palette…