Just give me charts.
A lightweight, zero-dependency SVG chart library for vanilla JS and React. One import, one line, one chart — rendered as a plain string, so it works anywhere: client, server, static, or edge.
Zero dependencies
No third-party packages. ~6 KB gzipped. Your data goes in, an SVG comes out — that's the whole library.
Works anywhere
Charts are plain strings, not DOM nodes. Server-render, static-export, stream from the edge, or drop into the browser. No canvas, no DOM required.
Stupidly fast
Hundreds of thousands of simple charts per second. No virtual DOM, no layout engine — just string building. See for yourself below.
Vanilla, or React.
Same chart, your stack. Pass your data, get a chart — no config objects three screens long. More frameworks on the way.
npm install @jgmc/vanillaimport { barchart } from '@jgmc/vanilla';
const svg = barchart({
data: [50, 100, 30, 80, 60],
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
});
el.innerHTML = svg;npm install @jgmc/reactimport { BarChart } from '@jgmc/react';
export function Stats() {
return (
<BarChart
data={[50, 100, 30, 80, 60]}
labels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
/>
);
}Render them live.
Pick a number and let your own browser build that many charts. The numbers below are measured right here, right now.
Generated live in your browser, right now — not precomputed. Big numbers run synchronously, so very large values will briefly block the page.
Styled out of the box.
Colors, gradients, strokes, and data labels are all built in. No plugins, no extra dependencies — and it's not just bars.
Alternating fills
Continuous gradient
Data labels
Strokes & widths
Pie & donut, too
Smooth lines
A few of the built-in options:
- • Per-bar or continuous linear gradients
- • Custom fills, strokes, and stroke widths
- • Literal or percentage data labels
- • Image data labels (with optional top/bottom text)
- • Style anything further with your own CSS classes
- • Bar, stacked bar, line, pie, donut (and ASCII!) charts
See the Labels guide for image labels and the full styling rundown.
How it compares
JGMC trades breadth of features for size, simplicity, and speed. For rich, highly-interactive dashboards the heavyweights are still excellent — JGMC is for when you just want a chart, fast.
| Library | Gzipped size | 3rd-party deps | Output | SSR / string |
|---|---|---|---|---|
| @jgmc/vanilla | ~6.2 KB | 0 | SVG string | Native |
| @jgmc/react | ~6.0 KB | 0 | React SVG | Native |
| Chart.js | ~66.8 KB | 1 | Canvas | Needs node-canvas |
| Recharts | ~134.6 KB | 11 | React SVG | React only |
| D3 | ~89.8 KB | 30 | SVG / Canvas | Low-level, manual |
Sizes are minified + gzipped, via bundlephobia. JGMC's only dependency is its own @jgmc/core — no third-party code.