# GraphicsJS: an SVG/VML drawing layer with a Virtual DOM

> GraphicsJS is a BSD-3-Clause JavaScript graphics library that sits under the AnyChart charting libraries and gives you a fluent API for paths, text measurement, layers and z-index. Its documentation is thinner than its feature list, and its release tags stopped in 2018 even though the repository kept receiving pushes.

**AnyChart/GraphicsJS** — A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

- Repository: https://github.com/AnyChart/GraphicsJS
- Website: http://www.graphicsjs.org/
- Stars: 995 · Forks: 71
- Language: JavaScript
- License: BSD-3-Clause
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/anychart-graphicsjs

## GraphicsJS is the paintbox under the charting layer

GraphicsJS describes itself as a lightweight JavaScript graphics library built on SVG and VML, and the useful way to think about it is a drawing surface rather than a chart library. Charts are one application of it, but so are game scenes, animated visualisations and mathematical plots. The project points at a galaxy demo built on an Archimedean spiral, a rain scene, a bonfire, a bending figure and a playable 15-puzzle, and states that all of them were made with GraphicsJS alone. Those examples sit next to a simpler claim: the AnyChart charting libraries render fully on top of GraphicsJS. So the audience is engineers who need pixels arranged on a page and would rather not hand-write DOM nodes, and engineers who need charts and want the same primitives available outside the chart widget.

## Path drawing goes past the Bezier curve limit

The main technical claim in the project is about line drawing. GraphicsJS is presented as having one of the most capable line drawing features among SVG and VML libraries, which the project argues give you only Bezier curves out of the box. That limit matters in practice, because an arc assembled purely from curves means assembling it curve by curve, and the project states that GraphicsJS lets you draw an arc quickly where other libraries make you arrange it through numerous curves. The mechanism is a fluent path builder. You call a path method, then chain movement and line commands, and each call returns the path so the drawing continues without intermediate variables. The quick start draws a triangle that way, then a separate path for the line through the middle of it. The library also describes itself as good with mathematical functions, which is what makes the spiral and rain scenes possible with a small amount of code.

## Text measurement and wrapping that SVG leaves out

Text is the quiet reason many teams look at a library like this. The project states that SVG and VML do not provide rich text features out of the box, and neither do most other JavaScript drawing libraries, while GraphicsJS supports multiline text plus text measurement for width and height, along with wrap, overflow, indent, spacing and alignment. Measurement matters for charts, where a label has to be sized before the axis is scaled, and for any layout where a box is allocated before the text inside it exists. The claim is narrower than it sounds, though. The list is a set of knobs for placing and measuring text, not a typesetting engine, and nothing in the project describes line breaking quality, font fallback or hyphenation rules. If precise typographic control is your requirement, that gap is the first thing to test.

## Layers, z-index and the Virtual DOM underneath

GraphicsJS implements a Virtual DOM, which the project says makes drawing more manageable, and pairs it with a smart layering system and support for z-index. The z-index point deserves attention because it changes how a scene is edited. The stated alternative in most drawing code is to erase everything and redraw the whole picture from scratch whenever the overlap order changes. With GraphicsJS the ordering can be rearranged dynamically, which is what you need in a large scene where you have to decide which elements must be visible at a given moment. On top of that sits a transformations API for moving, scaling, rotating and shearing both single elements and groups, and a flexible Event Model. The project links those three pieces together as the combination that turns a static drawing into something you can interact with.

## First drawing: one script tag and a sized container

The project documents its quick start as a plain HTML document with a script tag pointing at a hosted build and a container element whose size comes from CSS. The stage is created against the container id, then shapes are drawn onto it. Copy this into a file and open it in a browser:

```html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<script src="https://cdn.anychart.com/releases/v8/js/graphics.min.js"></script>
</head>
<body>
	<div id="stage-container" style="width: 400px; height: 375px;"></div>
	<script>
		// create a stage for the Deathly Hallows symbol
        stage = acgraph.create('stage-container');
        // draw the square
        stage.rect(5, 5, 350, 300);
        // draw the circle
        stage.circle(177.5, 205, 100);
        // draw the triangle
        stage.path()
            .moveTo(5, 305)
            .lineTo(175, 5)
            .lineTo(355, 305);
        // draw the wand in the middle
        stage.path()
            .moveTo(175, 5)
            .lineTo(175, 305);
	</script>
</body>
</html>
```

You should see a square, a circle, a triangle and a line crossing the middle, produced by a handful of calls. Two details in the sample are worth noticing. The stage is created from the id of a div whose width and height are fixed at 400 by 375 pixels, so the drawing surface is sized by layout rather than by the library. And the sample creates the stage without a var keyword, so the reference lands on the global object; in a real page you would hold on to it yourself. The sample also loads the build from the vendor CDN rather than from a package manager, so the code you run is whatever that URL resolves to, not the version declared in the package manifest.

## Why the native SVG DOM is a different bargain

GraphicsJS is a layer on top of the browser's own rendering primitives, and the honest alternative is to skip the layer. Working with the native SVG DOM gives you the browser's element tree directly, with no abstraction between your code and the document. What you give up is everything the library adds: chaining across path commands, the Virtual DOM, layers, text measurement, and the VML fallback that keeps the project usable in IE6 and later, which the project lists under browser support. The native route is clearly better when you already know the SVG you need, when you want to hand markup to a designer, or when you are rendering with canvas or WebGL rather than vectors. The opposite case is a scene with many changing elements, where the layering, z-index and grouping machinery saves more work than the abstraction costs. A second option is the AnyChart charting libraries, whose rendering is based fully on GraphicsJS: if the requirement is charts rather than free-form drawing, going up a level avoids rebuilding axis and series logic that already exists.

## Releases, licence and the gap between tags and pushes

Maintenance signals here are mixed and worth reading carefully. The repository is not archived, and the last push was on 2026-09-14, so the tree is still receiving commits. The published tags tell a different story: v1.3.5 was released on 2018-10-30, after v1.3.2 on 2017-12-20 and v1.3.1 on 2017-10-10. The package manifest in the repository declares version 1.4.4, and the licence field there reads BSD-3-Clause, matching the LICENSE file at the repository root. A BSD-3-Clause licence is permissive and places no copyleft obligation on code that links to it, though redistribution still has to carry the copyright notice and licence text. Upgrade cost is the area with the least documentation. There is no changelog beyond the release notes and no migration guide, and the Building section of the README is still a placeholder reading Coming soon, even though the repository root contains build.py, a src directory, a dist directory and a bower.json. The build pipeline is real in the tree and undocumented in the text.

## Conclusion

Adopt GraphicsJS when you need free-form vector drawing in the browser, layered scenes that change order, or the same primitives a chart widget is built on, and skip it if you need a documented build process or a published migration path. Before you commit, pin the exact build file you serve, check how the stage container is sized, and compare the v1.3.5 release tag with the 1.4.4 version in the package manifest, because those two numbers do not line up.

## FAQ

### How do I add GraphicsJS to an HTML page and draw something?

Load the hosted build with a script tag, create a container div with an id, then call acgraph.create with that id and draw shapes on the returned stage, for example stage.rect(5, 5, 350, 300). The container needs an explicit width and height in CSS because the stage takes its size from the element.

### Does GraphicsJS work in old browsers?

The project lists browser support down to IE6 and later, which it achieves through its SVG and VML foundations rather than through modern canvas or WebGL output.

### What is the difference between GraphicsJS and the AnyChart charting libraries?

GraphicsJS is the general drawing layer, and the project states that AnyChart rendering is based fully on it. AnyChart adds charting behaviour such as series and axes, so a charting requirement belongs in AnyChart while free-form scenes belong in GraphicsJS.

## Sources

- [AnyChart/GraphicsJS on GitHub](https://github.com/AnyChart/GraphicsJS)
- [License: BSD-3-Clause](https://github.com/AnyChart/GraphicsJS/blob/master/LICENSE)
- [Project website](http://www.graphicsjs.org/)
- [README](https://github.com/AnyChart/GraphicsJS/blob/master/README.md)
- [Releases](https://github.com/AnyChart/GraphicsJS/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/anychart-graphicsjs