JGMC

JGMC is a lightweight, zero-dependency SVG chart library for vanilla JavaScript and React that renders charts as plain strings. It allows developers to input data and generate SVG-based charts such as bar charts, pie charts, donut charts, and line charts with built-in styling options like colors, gradients, strokes, and data labels. The library is distributed via npm and GitHub and works in client, server, static, or edge environments without a virtual DOM or canvas.

The library emphasizes performance and simplicity, offering a small gzipped size of approximately 6.2 KB and minimal configuration for generating visual data representations. It trades breadth of features for size, simplicity, and speed, making it ideal when you just want a chart fast rather than a highly-interactive dashboard. The library has no third-party packages and relies only on its own @jgmc/core dependency.

JGMC supports both vanilla JavaScript and React, allowing developers to use the same charting capabilities across different stacks. For vanilla JS, users can import functions like barchart directly, while React users can use components like BarChart within their applications. The library provides a consistent API where passing data and labels results in a rendered SVG string.

The library renders charts as plain strings, enabling server-side rendering, static exports, and edge computing without requiring a DOM or canvas. This approach allows charts to be generated in environments like Node.js, static sites, or edge functions where traditional DOM manipulation is unavailable. The output is a plain SVG string that can be inserted into any HTML element.

JGMC includes built-in styling options such as alternating fills, continuous gradients, data labels, and custom strokes and widths. Users can also add image data labels with optional top or bottom text and style further using their own CSS classes. The library supports various chart types including bar, stacked bar, line, pie, donut, and ASCII charts.

The library is designed for developers who need a straightforward, lightweight solution for generating charts quickly. It is particularly suitable for scenarios where a full-featured dashboard is unnecessary and a simple visual representation of data is required. The zero-dependency nature makes it easy to integrate into projects without worrying about external package conflicts.

To get started, developers can install the library via npm using commands like npm install @jgmc/vanilla or npm install @jgmc/react. Once installed, they can import the necessary functions or components and pass their data to generate an SVG string. The library requires no additional setup beyond importing the package and inserting the resulting string into the DOM.

The library's only dependency is its own @jgmc/core, ensuring a minimal footprint with no third-party code. This design choice contributes to its small gzipped size and fast performance, allowing hundreds of thousands of simple charts to be generated per second. The synchronous nature of the rendering means very large values may briefly block the page, but this is a trade-off for speed.

The library's gzipped size is approximately 6.2 KB for the vanilla version and 6.0 KB for the React version, making it extremely lightweight. These sizes are measured via bundlephobia and include minification and gzip compression. The library avoids canvas and DOM nodes entirely, relying solely on string building for its output.

The official website of JGMC is jgmc.dev.

JGMC has no reviews on Trustburn yet. Anyone who has used it can write the first review on its Trustburn page.