purechart

Zero-dependency, no-build SVG charts, built security-first — for sensitive projects (internal tools, gateways, admin panels) that want the smallest possible attack surface.

Rendered with plain JavaScript: each chart type is a pure function that returns an SVG/HTML string, together with the <purechart-chart> web component. No external libraries, no build step, no install scripts. Theme/colors are fully customizable through CSS variables.

9 types: bar (stacked/grouped) · line · combo (dual axis) · heatmap · pie/donut · hbar (ranking) · sparkline · gauge · scatter.

Why it's secure

• 0 runtime dependencies — installing purechart pulls in no other packages (eliminating npm's biggest supply-chain attack vector).
• No build step → the published files are the source in git, byte for byte: you can diff the package against a commit/tag to verify it before use.
• No install scripts (postinstall/prepare/install) → no purechart code runs during npm i.
• Published manually + 2FA, not via CI → no tokens sitting in GitHub Actions.

Install (ordered by safety)

1) Vendoring — safest. Copy the src/ folder into your repo (review it in a PR, pin absolutely, no network):

import { barChart } from './vendor/purechart/auto.js';   // CSS comes along automatically

2) Install from Git, pinned to a tag/commit (no npm registry needed):

npm i github:madnh/purechart#v0.1.0          # the lockfile records the exact commit SHA
npm i git+https://github.com/madnh/purechart.git#<commit-sha>

3) npm registry (convenient):

npm i purechart

Quick start

import { barChart } from 'purechart';
import 'purechart/chart.css';     // bundler; or use 'purechart/auto' for no-build

el.innerHTML = barChart(
  [{ t: 1735689600, ok: 40, error: 3 }, { t: 1735693200, ok: 52, error: 5 }],
  [{ key: 'ok', className: 'purechart-series--ok' }, { key: 'error', className: 'purechart-series--error' }],
  { stepSecs: 3600 },
);

Or fully declarative — the <purechart-chart> element renders itself from its own content (no per-element JS); data shape is { series?, config?, data }:

<purechart-chart type="bar">
  <script type="application/json">{ "series": [...], "config": {...}, "data": [...] }</script>
</purechart-chart>

📖 Full guide (every chart type, options, interaction, theme/palette): src/USAGE.md — it ships inside the package, so it's readable after install (node_modules/purechart/src/USAGE.md).

Development

• Test: npm test (node --test, built-in) · Type-check: npm run typecheck (tsc via npx, nothing installed)
• Check the published package: npm run pack:check · Demo: python3 -m http.server → /demo.html
• No dependencies at all — not even dev ones. Type-checking uses npx typescript on demand (not in package.json).
• Conventions & how to add a chart: see CLAUDE.md.

Contributing & project scope

purechart is public for use, audit, and forking under the MIT license — but it is maintained solely by @madnh and does not accept outside contributions. This is deliberate: the library targets security-sensitive projects, so every line is authored and reviewed by a single maintainer as part of its threat model (it's also why releases are published manually, with no CI/GitHub Actions in the loop).

• ✅ Issues are welcome — bug reports, questions, and ideas. They may be acted on at the maintainer's discretion.
• ❌ Pull requests are not accepted and will be closed unmerged. No collaborators/contributors are added.
• 🍴 Need a change now? Fork it — the MIT license lets you modify and ship your own copy freely; you just can't merge changes back upstream.

See CONTRIBUTING.md for the full policy.

License

MIT © madnh