https://sourceforge.net/p/lombokcharts/wiki/Home/Recent changes to HomeenMon, 20 Jul 2026 08:22:01 -0000https://sourceforge.net/p/lombokcharts/wiki/Home/<div class="markdown_content"><pre>--- v6 +++ v7 @@ -26,14 +26,14 @@ &gt; Status: `0.1.0`, early but functional. The full test suite and all five build targets pass. -[](https://codinglombok.github.io/LombokCharts/) +[](https://codinglombok.github.io/LombokCharts/) | | | | --- | --- | -| [](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) | +| [](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) | </pre> </div>ZulfikarMon, 20 Jul 2026 08:22:01 -0000https://sourceforge.netb2ffca118331997f1a3c078854b11dbb083e953dhttps://sourceforge.net/p/lombokcharts/wiki/Home/<div class="markdown_content"><pre>--- v5 +++ v6 @@ -26,14 +26,14 @@ &gt; Status: `0.1.0`, early but functional. The full test suite and all five build targets pass. -[](https://codinglombok.github.io/LombokCharts/) +[](https://codinglombok.github.io/LombokCharts/) | | | | --- | --- | -| [](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) | +| [](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) | </pre> </div>ZulfikarMon, 20 Jul 2026 08:19:35 -0000https://sourceforge.net18c10e5957bbf777a50c40f860a9df39a8a1f97fhttps://sourceforge.net/p/lombokcharts/wiki/Home/<div class="markdown_content"><pre>--- v4 +++ v5 @@ -26,14 +26,14 @@ &gt; Status: `0.1.0`, early but functional. The full test suite and all five build targets pass. -[](https://codinglombok.github.io/LombokCharts/) +[](https://codinglombok.github.io/LombokCharts/) | | | | --- | --- | -| [](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) | +| [](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) | </pre> </div>ZulfikarMon, 20 Jul 2026 08:17:07 -0000https://sourceforge.netf9fae0b14c609e6bc954f5bdfd3a0974bcbc5e0fhttps://sourceforge.net/p/lombokcharts/wiki/Home/<div class="markdown_content"><pre>--- v3 +++ v4 @@ -57,17 +57,50 @@ title: 'Quarterly Revenue', }); +### CDN (jsDelivr) + +- From npm: + + :::html + &lt;script src="https://cdn.jsdelivr.net/npm/lombok-charts/dist/lombok-charts.umd.min.js"&gt;&lt;/script&gt; +OR + + :::html + &lt;script src="https://cdn.jsdelivr.net/npm/lombok-charts@0.1.1/dist/lombok-charts.umd.min.js"&gt;&lt;/script&gt; + - From GitHub (works before an npm release, since `dist/` is committed): + + :::html + https://cdn.jsdelivr.net/gh/codinglombok/LombokCharts@v0.1.0/dist/lombok-charts.umd.min.js + ### Via `&lt;script&gt;` (no build step) The UMD build attaches a global `LombokCharts`: + + :::html + &lt;script src="https://cdn.jsdelivr.net/npm/lombok-charts/dist/lombok-charts.umd.min.js"&gt;&lt;/script&gt; +OR :::html &lt;script src="https://cdn.jsdelivr.net/npm/lombok-charts/dist/lombok-charts.umd.min.js"&gt;&lt;/script&gt; &lt;script&gt; LombokCharts.chart('#app', { data: [{label:'A',value:10}], mark: 'bar' }); &lt;/script&gt; - -Also available on unpkg: `https://unpkg.com/lombok-charts/dist/lombok-charts.umd.min.js`. +OR +Type UMD : + + :::html + &lt;script src="https://cdn.jsdelivr.net/npm/lombok-charts@0.1.1/dist/lombok-charts.umd.min.js"&gt;&lt;/script&gt; +OR +Type ESM : + + :::html + &lt;script type="module"&gt; import lombokCharts from 'https://cdn.jsdelivr.net/npm/lombok-charts@0.1.1/+esm' &lt;/script&gt; + + +### Also available on unpkg: + + :::bashh + https://unpkg.com/lombok-charts/dist/lombok-charts.umd.min.js ### Composer (Packagist) @@ -78,11 +111,7 @@ Then reference `vendor/codinglombok/lombok-charts/dist/lombok-charts.umd.min.js`. -### CDN (jsDelivr) - -- From npm: `https://cdn.jsdelivr.net/npm/lombok-charts@0.1.0/dist/lombok-charts.umd.min.js` -- From GitHub (works before an npm release, since `dist/` is committed): - `https://cdn.jsdelivr.net/gh/codinglombok/LombokCharts@v0.1.0/dist/lombok-charts.umd.min.js` + ## Chart types </pre> </div>ZulfikarMon, 20 Jul 2026 01:18:38 -0000https://sourceforge.net972c5949c5cc3022a8bb931ca5ef79e6b3df16f6https://sourceforge.net/p/lombokcharts/wiki/Home/<div class="markdown_content"><pre>--- v2 +++ v3 @@ -1 +1,212 @@ -Welcome to the LombokCharts wiki! +# LombokCharts + +[](https://github.com/codinglombok/LombokCharts/actions/workflows/ci.yml) +[](https://github.com/codinglombok/LombokCharts/actions/workflows/linter.yml) +[](https://github.com/codinglombok/LombokCharts/actions/workflows/pages.yml) +[](https://www.npmjs.com/package/lombok-charts) +[](https://www.npmjs.com/package/lombok-charts) +[](https://www.jsdelivr.com/package/npm/lombok-charts) +[](#) +[](LICENSE) +[](https://sourceforge.net/projects/lombokcharts/) + +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. Redraws are coalesced to one per frame. +- **Tree-shakeable.** Register only the marks you use and the rest is dropped by your bundler. +- **~18 KB gzipped** for the full build with every mark registered; far less for a custom subset. + +&gt; Status: `0.1.0`, early but functional. The full test suite and all five build targets pass. + +[](https://codinglombok.github.io/LombokCharts/) + + +| | | +| --- | --- | +| [](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) | + + + +## Install + + :::bash + npm install lombok-charts + # or: pnpm add lombok-charts / yarn add lombok-charts + + :::js + import { chart } from 'lombok-charts'; + + chart('#app', { + data: [ + { label: 'Q1', value: 120 }, + { label: 'Q2', value: 200 }, + { label: 'Q3', value: 150 }, + { label: 'Q4', value: 280 }, + ], + mark: 'bar', + title: 'Quarterly Revenue', + }); + +### Via `&lt;script&gt;` (no build step) + +The UMD build attaches a global `LombokCharts`: + + :::html + &lt;script src="https://cdn.jsdelivr.net/npm/lombok-charts/dist/lombok-charts.umd.min.js"&gt;&lt;/script&gt; + &lt;script&gt; + LombokCharts.chart('#app', { data: [{label:'A',value:10}], mark: 'bar' }); + &lt;/script&gt; + +Also available on unpkg: `https://unpkg.com/lombok-charts/dist/lombok-charts.umd.min.js`. + +### Composer (Packagist) + +For PHP projects that want the built assets in `vendor/`: + + :::bash + composer require codinglombok/lombok-charts + +Then reference `vendor/codinglombok/lombok-charts/dist/lombok-charts.umd.min.js`. + +### CDN (jsDelivr) + +- From npm: `https://cdn.jsdelivr.net/npm/lombok-charts@0.1.0/dist/lombok-charts.umd.min.js` +- From GitHub (works before an npm release, since `dist/` is committed): + `https://cdn.jsdelivr.net/gh/codinglombok/LombokCharts@v0.1.0/dist/lombok-charts.umd.min.js` + +## 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, either as a shorthand string (`'donut'`, `'stacked-bar'`, +`'spline'`) or as an object with extra settings (`{ type: 'gauge', value: 72, min: 0, max: 100 }`). + +## Quick examples + +Multi-series line from row objects: + + :::js + chart('#chart', { + data: rows, // [{ month:'Jan', sales: 10, cost: 6 }, ...] + x: 'month', + series: [ + { key: 'sales', label: 'Sales' }, + { key: 'cost', label: 'Cost' }, + ], + mark: 'line', + }); + +A large series from typed arrays (skips object overhead entirely): + + :::js + const xs = new Float64Array(n), ys = new Float64Array(n); + // ...fill... + chart('#chart', { xs, ys, count: n, mark: 'line' }); // LTTB kicks in automatically + +Real-time stream with a sliding window: + + :::js + const c = chart('#chart', { mark: 'line', maxPoints: 2000 }); + setInterval(() =&gt; c.appendData({ x: Date.now(), y: read() }), 16); + // or: c.stream(new WebSocket('wss://…'), (msg) =&gt; ({ x: msg.t, y: msg.v })); + +Export and theming: + + :::js + c.setTheme('dark'); + const png = c.toPNG(); // data URL + const svg = c.toSVG(); // serialized <svg> markup + +## Performance + +The Canvas renderer has a typed-array fast path (`polylineTyped` / `pointsTyped`) that avoids +per-point allocations, and line/area/scatter marks decimate with LTTB when the series has more +points than the plot has horizontal pixels to show them. Spikes and outliers survive decimation +because LTTB selects the point that maximizes triangle area per bucket. Animation is disabled +automatically above 50,000 points so the first paint stays responsive. + +Real numbers depend heavily on the machine, GPU, and viewport, so rather than ship fabricated +figures the repo includes a live benchmark: open [`examples/stress.html`](examples/stress.html), +choose 100k / 1M / 5M points, toggle LTTB on/off, switch Canvas vs SVG, and read FPS, initial +render time, and the drawn-point count off the overlay. The "Compare Canvas vs SVG" button fills +a table you can record for your own hardware. + +General guidance from the design: + +- **Canvas + LTTB** is the right default for anything above a few thousand points; it stays + interactive into the millions because the number of points actually rasterized is bounded by + the pixel width, not the dataset size. +- **Raw (non-decimated) Canvas** is fine into the hundreds of thousands and degrades gracefully. +- **SVG** is best below a few thousand points or when you need vector output; it is not the tool + for raw million-point series (one DOM-scale path per frame), so the benchmark decimates for it. + +## Bundle size + +| Build | File | Raw | Gzipped | +| --- | --- | --- | --- | +| ESM (min) | `dist/lombok-charts.esm.min.js` | ~56 KB | ~18 KB | +| UMD (min) | `dist/lombok-charts.umd.min.js` | ~56 KB | ~18 KB | + +These cover the **full** library with all 13 marks registered. Importing `Chart` plus only the +marks you need lets your bundler tree-shake the rest for a smaller footprint. + +## API at a glance + + chart(container, config) -&gt; Chart // factory; same as new Chart(container, config) + + Chart#render() // (re)draw, animating on first paint + Chart#update(data | { xs, ys, count }) // replace data and redraw + Chart#appendData(point | point[]) // live append (coalesced to one redraw/frame) + Chart#stream(source, map?) // async iterator | EventSource | WebSocket + Chart#setTheme('light' | 'dark' | {...}) // swap theme tokens (deep-merged) + Chart#resize() // re-measure container (also automatic via ResizeObserver) + Chart#toPNG() / Chart#toSVG() // export + Chart#on('hover' | 'select' | 'append', fn) + Chart#destroy() // remove listeners, observers, DOM + +Full reference: [`docs/api.md`](docs/api.md). Theming: [`docs/theming.md`](docs/theming.md). +Internals and how to add a mark: [`docs/architecture.md`](docs/architecture.md). Porting the +pure-logic core to other languages: [`docs/porting.md`](docs/porting.md). + +## Development + + :::bash + npm install # dev-only: esbuild + npm run build # -&gt; dist/ (esm, esm.min, umd, umd.min, cjs) + npm test # zero-dependency test runner (unit + headless DOM smoke) + npm run dev # watch build + +The build output is committed-free (`dist/` is git-ignored); CI rebuilds on every push. The test +suite runs pure-logic checks (scales, LTTB, ring buffer, quadtree) plus an end-to-end pipeline +test under a tiny headless DOM/Canvas shim, so integration regressions are caught without a browser. + +## Roadmap + +- WebGL renderer (the renderer interface already isolates the drawing surface; a stub marks the seam). +- More statistical marks (violin, density, OHLC volume overlay). +- Declarative axis/legend configuration surface. +- Published, machine-specific benchmark results once the API stabilizes. + +## License + +Apache-2.0 © codinglombok — see [LICENSE](LICENSE) and [NOTICE](NOTICE). +This project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details. </svg></pre> </div>ZulfikarMon, 20 Jul 2026 01:18:38 -0000https://sourceforge.net85f791c42566b5f18805e8a5f4d3fd1163e40320https://sourceforge.net/p/lombokcharts/wiki/Home/<div class="markdown_content"><pre>--- v1 +++ v2 @@ -1,8 +1 @@ -Welcome to your wiki! - -This is the default page, edit it as you see fit. To add a new page simply reference it within brackets, e.g.: [SamplePage]. - -The wiki uses [Markdown](/nf/markdown_syntax) syntax. - -[[members limit=20]] -[[download_button]] +Welcome to the LombokCharts wiki! </pre> </div>ZulfikarMon, 20 Jul 2026 01:18:37 -0000https://sourceforge.net3b314b73accbb7351ab8b2f206d97499142b62e2https://sourceforge.net/p/lombokcharts/wiki/Home/<div class="markdown_content"><p>Welcome to your wiki!</p> <p>This is the default page, edit it as you see fit. To add a new page simply reference it within brackets, e.g.: <span>[SamplePage]</span>.</p> <p>The wiki uses <a href="/nf/markdown_syntax" rel="nofollow">Markdown</a> syntax.</p> <p></p><h6>Project Members:</h6> <ul class="md-users-list"> <li><a href="/u/codinglombok/">Zulfikar</a> (admin)</li> </ul><br/> <p><span class="download-button-6a4a8d38e776c56885a9dc49" style="margin-bottom: 1em; display: block;"></span></p><p></p></div>ZulfikarMon, 20 Jul 2026 01:18:36 -0000https://sourceforge.netebe0f4625776d1dc4fefca15f38ba5acb8760f60