# LombokCharts
> Universal zero-dependency charting library — Canvas/SVG, LTTB decimation, real-time streaming.
> Part of [Lombok Ecosystem](https://github.com/codinglombok). Apache-2.0.
[](https://codinglombok.github.io/LombokCharts/)
---
## GitHub
[](https://github.com/codinglombok/LombokCharts/actions/workflows/ci.yml)
[](https://github.com/codinglombok/LombokCharts/actions/workflows/codeql.yml)
[](https://github.com/codinglombok/LombokCharts/actions/workflows/visual.yml)
[](https://github.com/codinglombok/LombokCharts/actions/workflows/pages.yml)
[](LICENSE)
[](https://github.com/codinglombok/LombokCharts/releases/latest)
[](https://github.com/codinglombok/LombokCharts/releases)
[](https://github.com/codinglombok/LombokCharts/releases/latest)
[](https://github.com/codinglombok/LombokCharts)
---
## npm
[](https://www.npmjs.com/package/lombok-charts)
[](https://www.npmjs.com/package/lombok-charts)
[](https://www.npmjs.com/package/lombok-charts)
[](https://www.jsdelivr.com/package/npm/lombok-charts)
---
## SourceForge
[](https://sourceforge.net/projects/lombokcharts/files/latest/download)
[](https://sourceforge.net/projects/lombokcharts/files/latest/download)
[](https://sourceforge.net/projects/lombokcharts/files/latest/download)
[](https://sourceforge.net/projects/lombokcharts/files/latest/download)
[](https://sourceforge.net/projects/lombokcharts/files/latest/download)
---
## Packagist
[](https://packagist.org/packages/codinglombok/lombok-charts)
[](https://packagist.org/packages/codinglombok/lombok-charts)
[](https://packagist.org/packages/codinglombok/lombok-charts)
---
## Quality
[](#)
[](#)
[](#)
[](#)
[](#)
---
## Community
[](https://github.com/codinglombok/LombokCharts)
[](https://github.com/codinglombok/LombokCharts/fork)
[](https://github.com/codinglombok/LombokCharts/watchers)
[](https://github.com/codinglombok/LombokCharts/graphs/contributors)
[](https://github.com/codinglombok/LombokCharts/issues)
[](https://github.com/codinglombok/LombokCharts/pulls)
[](https://github.com/codinglombok/LombokCharts/commits/main)
```bash
git clone https://github.com/codinglombok/LombokCharts.git
```
---
A zero-dependency charting library for the browser. It pairs a small grammar-of-graphics
core (Data → Scale → Mark) with pluggable Canvas and SVG renderers, LTTB decimation, and a
real-time streaming layer — so the same API draws a five-point bar chart or a five-million-point
line without changing shape.
- **Zero runtime dependencies.** Native Canvas2D / SVG / `ResizeObserver` / `requestAnimationFrame` / typed arrays only.
- **Two renderers, one API.** Canvas by default (fast path for huge series), SVG when you want crisp vector output or DOM-inspectable nodes.
- **Scales from tiny to massive.** Typed-array pipeline plus Largest-Triangle-Three-Buckets (LTTB) decimation keeps million-point series interactive.
- **Real-time built in.** `appendData`, async iterators, `EventSource`, or `WebSocket`, with a ring buffer for constant-memory sliding windows.
- **Tree-shakeable.** Register only the marks you use and the rest is dropped by your bundler.
- **~19 KB gzipped** for the full build with every mark registered; far less for a custom subset.
| | |
| ------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
| [](https://codinglombok.github.io/LombokCharts/templates/trading-dashboard/index.html) | [](https://codinglombok.github.io/LombokCharts/templates/analytics-dashboard/index.html) |
| [](https://codinglombok.github.io/LombokCharts/templates/monitoring-dashboard/index.html) | [](https://codinglombok.github.io/LombokCharts/templates/crm-dashboard/index.html) |
| [](https://codinglombok.github.io/LombokCharts/examples/index.html) | [](https://codinglombok.github.io/LombokCharts/examples/stress.html) |
## Why this library? (Mengapa library ini?)
LombokCharts is a standalone, general-purpose charting library for **anyone who needs to turn
numbers into pictures** — web developers, data/BI teams, fintech and trading desks, SRE and
monitoring dashboards, IoT and industrial HMI/kiosk panels, scientific and education tools,
and government or NGO open-data portals. It is not tied to any single application or framework.
| Problem | How LombokCharts solves it |
|---|---|
| Chart libraries pull in large dependency trees | **Zero runtime dependencies**, ~19 KB gzip full build, tree-shakeable marks |
| Libraries are fast *or* crisp, not both | One API over **Canvas** (millions of points) and **SVG** (vector, inspectable) |
| Millions of points freeze the browser | Typed-array pipeline + **LTTB / min-max decimation** |
| Live data needs custom plumbing | Built-in **ring buffer**, rAF-coalesced `appendData`, WebSocket / SSE / async iterator |
| Charts are English-only and inaccessible | Opt-in **i18n (Core-20 + Nusantara, RTL)**, ARIA role/summary, locale-aware ticks |
| Logic cannot be reused outside JS | Pure DOM-free core with a **normative SPEC + cross-language test vectors** for ports |
Compared with Chart.js, ECharts, uPlot, Plotly and D3, LombokCharts is the only one that combines
zero dependencies, a grammar-of-graphics core, dual Canvas/SVG output, built-in LTTB streaming
and cross-language test vectors for porting the pure core.
## Quick Start
### npm / bundler
```bash
npm install lombok-charts
```
```js
import { chart } from "lombok-charts";
chart("#app", {
mark: "bar",
data: [
{ label: "Q1", value: 120 },
{ label: "Q2", value: 200 },
{ label: "Q3", value: 150 },
{ label: "Q4", value: 280 },
],
title: "Quarterly Revenue",
});
```
### CDN (no build step)
```html
```
Other CDN options (pinned version, ESM, unpkg) are listed in [`DISTRIBUTION.md`](DISTRIBUTION.md).
### Composer (PHP projects)
```bash
composer require codinglombok/lombok-charts
```
Then reference `vendor/codinglombok/lombok-charts/dist/lombok-charts.umd.min.js` in your HTML.
## Chart Types
| Family | Marks |
| ----------- | --------------------------------------------------- |
| Bar | column, horizontal bar, grouped, stacked, waterfall |
| Line | line, step, spline (Catmull-Rom), slope |
| Area | area, stacked, streamgraph |
| Point | scatter, bubble |
| Arc | pie, donut, gauge, radial bar |
| Statistical | histogram, box plot |
| Financial | candlestick (OHLC) |
| Specialized | radar, heatmap, funnel, treemap, sankey |
Pick a mark with the `mark` option: a shorthand string (`'donut'`, `'stacked-bar'`, `'spline'`)
or an object with extra settings (`{ type: 'gauge', value: 72, min: 0, max: 100 }`).
## Examples
**Multi-series line:**
```js
chart("#chart", {
mark: "line",
data: rows, // [{ month:'Jan', sales: 10, cost: 6 }, ...]
x: "month",
series: [
{ key: "sales", label: "Sales" },
{ key: "cost", label: "Cost" },
],
});
```
**Donut chart:**
```js
chart("#chart", {
mark: "donut",
data: [
{ label: "Mobile", value: 58 },
{ label: "Desktop", value: 32 },
{ label: "Tablet", value: 10 },
],
});
```
**Large dataset with typed arrays (LTTB kicks in automatically):**
```js
const xs = new Float64Array(1_000_000);
const ys = new Float64Array(1_000_000);
// ...fill...
chart("#chart", { mark: "line", xs, ys, count: 1_000_000 });
```
**Real-time stream with sliding window:**
```js
const c = chart("#chart", { mark: "line", maxPoints: 2000 });
setInterval(() => c.appendData({ x: Date.now(), y: read() }), 16);
// or: c.stream(new WebSocket('wss://…'), (msg) => ({ x: msg.t, y: msg.v }));
```
**Theming and export:**
```js
c.setTheme("dark");
const png = c.toPNG(); // data URL
const svg = c.toSVG(); // serialized