PHPackages codinglombok/lombok-charts - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. codinglombok/lombok-charts ActiveLibrary codinglombok/lombok-charts ========================== Zero-dependency chart library: grammar-of-graphics pipeline, Canvas/SVG renderers, LTTB decimation, and real-time streaming. ~18 KB gzipped. v0.1.0(3w ago)00[2 PRs](https://github.com/codinglombok/LombokCharts/pulls)Apache-2.0HTMLCI passing Since Jul 8Pushed todayCompare [ Source](https://github.com/codinglombok/LombokCharts)[ Packagist](https://packagist.org/packages/codinglombok/lombok-charts)[ Docs](https://github.com/codinglombok/LombokCharts)[ RSS](/packages/codinglombok-lombok-charts/feed)WikiDiscussions main Synced today READMEChangelog (1)DependenciesVersions (13)Used By (0) LombokCharts ============ [](#lombokcharts) --- ### Git Hub [](#git-hub) [![CI](https://github.com/codinglombok/LombokCharts/actions/workflows/ci.yml/badge.svg)](https://github.com/codinglombok/LombokCharts/actions/workflows/ci.yml)[![Super-Linter](https://github.com/codinglombok/LombokCharts/actions/workflows/linter.yml/badge.svg)](https://github.com/codinglombok/LombokCharts/actions/workflows/linter.yml)[![Deploy docs](https://github.com/codinglombok/LombokCharts/actions/workflows/pages.yml/badge.svg)](https://github.com/codinglombok/LombokCharts/actions/workflows/pages.yml)[![License](https://camo.githubusercontent.com/a549a7a30bacba7bfceebdc207a8e86c3f2c02995a2527640dca30048fd2b64e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d417061636865253230322e302d626c75652e737667)](LICENSE) ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [](#) ### NPM [](#npm) [![npm version](https://camo.githubusercontent.com/fce4475b65b76dea563469c8f44ce1e202528238eb174338f6f2a66b7b9172be/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6c6f6d626f6b2d6368617274732e737667)](https://www.npmjs.com/package/lombok-charts)[![npm downloads](https://camo.githubusercontent.com/23c72ae8b5483bb12967be46932a725d9f0d1a5158ed98b20b348bb9f3d0d4f6/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f6c6f6d626f6b2d6368617274732e737667)](https://www.npmjs.com/package/lombok-charts)[![jsDelivr hits](https://camo.githubusercontent.com/03f9740285c0e2bf1300971c7af1d16fa23e72c19828536f4e76ee98d326d2a7/68747470733a2f2f696d672e736869656c64732e696f2f6a7364656c6976722f6e706d2f686d2f6c6f6d626f6b2d6368617274732e737667)](https://www.jsdelivr.com/package/npm/lombok-charts)[![gzip size](https://camo.githubusercontent.com/0b6df1a9a666053510381210d779709b25295af92636764b664b8b2a9e8f88ea/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f677a69702d31392532304b422d737563636573732e737667)](#) --- ### Sourceforge.net [](#sourceforgenet) [![Download LombokCharts](https://camo.githubusercontent.com/efcf70acc9b360a1dfbb0a1e22bf7928f651e0a239bc50b7c410f89be3659de9/68747470733a2f2f612e6673646e2e636f6d2f636f6e2f6170702f73662d646f776e6c6f61642d627574746f6e)](https://sourceforge.net/projects/lombokcharts/files/latest/download)[![Download LombokCharts](https://camo.githubusercontent.com/a288805625df26760a26520c89eb14c962a2463df71eddba43c9c0d2f9c965a3/68747470733a2f2f696d672e736869656c64732e696f2f736f75726365666f7267652f646d2f6c6f6d626f6b6368617274732e737667)](https://sourceforge.net/projects/lombokcharts/files/latest/download)[![Download LombokCharts](https://camo.githubusercontent.com/c7f4c39f65800af9a8dcbcec6e86f7e824d900a291644c703df8704838e46efe/68747470733a2f2f696d672e736869656c64732e696f2f736f75726365666f7267652f64772f6c6f6d626f6b6368617274732e737667)](https://sourceforge.net/projects/lombokcharts/files/latest/download)[![Download LombokCharts](https://camo.githubusercontent.com/ebe79bed121742211940c933863ad3c56a8b9a3b4c72ce4297193c7e79436f61/68747470733a2f2f696d672e736869656c64732e696f2f736f75726365666f7267652f64642f6c6f6d626f6b6368617274732e737667)](https://sourceforge.net/projects/lombokcharts/files/latest/download)[![Download LombokCharts](https://camo.githubusercontent.com/bcc5075e7f66a59832b561347fe99723061997a4e6b4ba9ac8e0f31eac441642/68747470733a2f2f696d672e736869656c64732e696f2f736f75726365666f7267652f64742f6c6f6d626f6b6368617274732e737667)](https://sourceforge.net/projects/lombokcharts/files/latest/download) ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [](#-1) 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. [![LombokCharts - Zero Dependency Charting Library](https://camo.githubusercontent.com/0ec6c1eea6a93fd63df95e5f424a25a3321ae5f4318a05986d9af728264b27f0/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6f6d626f6b4368617274732d5a65726f253230446570656e64656e63792d627269676874677265656e3f7374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/0ec6c1eea6a93fd63df95e5f424a25a3321ae5f4318a05986d9af728264b27f0/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6f6d626f6b4368617274732d5a65726f253230446570656e64656e63792d627269676874677265656e3f7374796c653d666f722d7468652d6261646765) - **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. > Status: `0.1.0`, early but functional. The full test suite and all five build targets pass. [![LombokCharts Preview](assets/social-preview.png)](https://codinglombok.github.io/LombokCharts/) [![Trading Terminal](assets/previews/trading.png)](https://codinglombok.github.io/LombokCharts/templates/trading-dashboard/index.html)[![Analytics Dashboard](assets/previews/analytics.png)](https://codinglombok.github.io/LombokCharts/templates/analytics-dashboard/index.html)[![Monitoring Dashboard](assets/previews/monitoring.png)](https://codinglombok.github.io/LombokCharts/templates/monitoring-dashboard/index.html)[![CRM Dashboard](assets/previews/crm.png)](https://codinglombok.github.io/LombokCharts/templates/crm-dashboard/index.html)[![Examples Gallery](assets/previews/examples.png)](https://codinglombok.github.io/LombokCharts/examples/index.html)[![Stress Benchmark](assets/previews/stress.png)](https://codinglombok.github.io/LombokCharts/examples/stress.html)Install ------- [](#install) ``` npm install lombok-charts # or: pnpm add lombok-charts / yarn add lombok-charts ``` ``` 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", }); ``` ### CDN (jsDelivr) [](#cdn-jsdelivr) - From npm: ``` ``` OR ``` ``` - 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 ``` ### Via `` (no build step) [](#via-script-no-build-step) The UMD build attaches a global `LombokCharts`: ``` ``` OR ``` LombokCharts.chart("#app", { data: [{ label: "A", value: 10 }], mark: "bar", }); ``` OR Type UMD : ``` ``` OR Type ESM : ``` import lombokCharts from "https://cdn.jsdelivr.net/npm/lombok-charts@0.1.1/+esm"; ``` ### Also available on unpkg: [](#also-available-on-unpkg) ``` https://unpkg.com/lombok-charts/dist/lombok-charts.umd.min.js ``` ### Composer (Packagist) [](#composer-packagist) For PHP projects that want the built assets in `vendor/`: ``` composer require codinglombok/lombok-charts ``` Then reference `vendor/codinglombok/lombok-charts/dist/lombok-charts.umd.min.js`. Chart types ----------- [](#chart-types) FamilyMarksBarcolumn, horizontal bar, grouped, stacked, waterfallLineline, step, spline (Catmull-Rom), slopeAreaarea, stacked, streamgraphPointscatter, bubbleArcpie, donut, gauge, radial barStatisticalhistogram, box plotFinancialcandlestick (OHLC)Specializedradar, heatmap, funnel, treemap, sankeyPick 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 -------------- [](#quick-examples) Multi-series line from row objects: ``` 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): ``` 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: ``` 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 })); ``` Export and theming: ``` c.setTheme("dark"); const png = c.toPNG(); // data URL const svg = c.toSVG(); // serialized markup ``` Performance ----------- [](#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 ----------- [](#bundle-size) BuildFileRawGzippedESM (min)`dist/lombok-charts.esm.min.js`~56 KB~18 KBUMD (min)`dist/lombok-charts.umd.min.js`~56 KB~18 KBThese 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 --------------- [](#api-at-a-glance) ``` chart(container, config) -> 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 ----------- [](#development) ``` npm install # dev-only: esbuild npm run build # -> 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 ------- [](#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 ------- [](#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. ### Health Score 35 — LowBetter than 77% of packages Maintenance98 Actively maintained with recent releases Popularity0 Limited adoption so far Community9 Small or concentrated contributor base Maturity30 Early-stage or recently created project Bus Factor1 Top contributor holds 82% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 26d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/3b60d7e5147329f36f70355352e25d3780e372f29be4a540785f005ee99ee900?d=identicon)[codinglombok](/maintainers/codinglombok) --- Top Contributors [![codinglombok](https://avatars.githubusercontent.com/u/293781745?v=4)](https://github.com/codinglombok "codinglombok (114 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (24 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (1 commits)") --- Tags svgrealtimecanvaschartchartsvisualizationlombokzero-dependencylttb ### Embed Badge ![Health badge](/badges/codinglombok-lombok-charts/health.svg) ``` [![Health](https://phpackages.com/badges/codinglombok-lombok-charts/health.svg)](https://phpackages.com/packages/codinglombok-lombok-charts) ``` ### Alternatives [mbostock/d3 A JavaScript visualization library for HTML and SVG. 113.4k445.7k3](/packages/mbostock-d3)[cmen/google-charts-bundle This Bundle provides a Twig extension and PHP objects to display Google charts in your Symfony application. 76867.7k2](/packages/cmen-google-charts-bundle)[ianw/quickchart QuickChart chart API 46775.8k](/packages/ianw-quickchart)[antoineaugusti/easyphpcharts A PHP class for chartjs.org charts. 253.2k](/packages/antoineaugusti-easyphpcharts)[image-charts/image-charts Official Image-Charts.com API client library 2871.0k](/packages/image-charts-image-charts)[onmotion/yii2-widget-apexcharts Yii2 charts widget - wrapper for the ApexCharts.js 1961.6k1](/packages/onmotion-yii2-widget-apexcharts) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)