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

Overview

GraphicsJS

GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

Overview

GraphicsJS is a JavaScript graphics library that allows you to draw absolutely anything, including any sort of interactive and animated graphics with any visual effects.

You can think of GraphicsJS as a paintbox with a brush, GraphicsJS may be used for data visualization, charting, game design or else. AnyChart charting libraries rendering is based fully on it.

You can find some specific samples at http://www.graphicsjs.org/, along with source code: galaxy, rain, bonfire, Bender, and a playable 15-puzzle. All of these were created with GraphicsJS only.

GraphicsJS allows to visualize complicated mathematical algorithms very conveniently and easily, e.g. the galaxy demo is based on Archimedean spiral.

GraphicsJS has one the most powerful line drawing features among SVG/VML based graphics libraries that provide only Bezier curves out of the box. But GraphicsJS is great at working with mathematical functions. As a result, GraphicsJS allows you to draw not only Bezier curves out of the box, but literally anything; for example, you can draw some arc very quickly, whereas other graphics libraries will make you arrange it through numerous different curves. And surely there are basic shapes available

GraphicsJS has the richest text features, for example, SVG/VML technologies do not provide this out of the box, as well as most of other JavaScript drawing libraries. GraphicsJS supports multiline texts and also offers text measurement, including width, height, as well as wrap, overflow, indent, spacing, align, etc.

GraphicsJS has implements the Virtual DOM which makes drawing more robust and manageable.

GraphicsJS uses smart layering system for elements and layers.

GraphicsJS supports z-index. Typically, if you ever decided to change the overlapping order, you would have to erase everything and draw the whole picture again, from scratch. With GraphicsJS, you are given the power to arrange this dynamically, which is extremely helpful when you are creating some big graphical thing and it is important for you to specify which elements must be seen at one moment or another.

GraphicsJS provides a convenient Transformations API that allows to move, scale, rotate and shear both elements and groups of elements. Transformations, in good hands, when used along with flexible Event Model and Virtual DOM, is a very powerfull tool.

GraphicsJS supports legacy browsers including IE6+.

GraphicsJS API is very convenient to use. GraphicsJS API is very concise and provides chaining support, which makes it possible to use a dozen lines of code where other libraries require a hundred.

GraphicsJS is built on a very reliable technology, Google Closure, just like Google Mail, Google Calendar, Google Drive, and so on.

Quick Start

To get started with GraphicsJS create simple HTML document and copy paste the following code (or just grab the sample from playground):

<!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>

Launch the page in your browser and here you are: you have created your first drawing with GraphicsJS. See documentation and API to learn more.

Articles

Building

Coming soon.

Contributing

To contribute to AnyChart project please:

  • Fork GraphicsJS repository.
  • Create a branch from the develop branch.
  • Make any changes you want to contribute.
  • Create a pull request against the develop branch.

GitHub documentation: Forking repositories. GitHub documentation: Collaborating using pull requests.

Links

Comments
  • Nodejs: Cannot find module 'graphicsjs'

    Nodejs: Cannot find module 'graphicsjs'

    After successful installation package with npm, i write to server.js var G=require('graphicsjs') and at startup receive Error: Cannot find module 'graphicsjs' Package version: 1.3.2

    opened by A134025 1
  • User defined functions?

    User defined functions?

    Some of my graphics include grids, which can be easily programmed by sets of lines. However, it would be convenient to have a function called, say, "grid" which I can simply call when needed. For example, I have the following in the "head" part of my html document:

    <script>
      function grid(nr,nc,h,w) {
      for (var i=0; i<= nr; i++ ) {
          stage.path().moveTo(0,i*h).lineTo(nc*w,i*h);
      }
      for (var i=0; i<=nc; i++ ) {
          stage.path().moveTo(i*w,0).lineTo(i*w,nr*h);
      }
      }
    </script>
    

    This creates a grid with a corner at (0,0), and with parameters as given. This is all very well, but what happens if I want to draw a grid elsewhere, or rotate a grid? I shouldn't have to include too many parameters in the function itself, and I'd hope that something like:

    var g  = grid(2,4,100,50);
    g.translate(200,100);
    

    should work - but it doesn't. I also can't change the style of the grid lines using "stroke". Clearly I'm missing something.

    How can I write a small function for a particular graphics element, which itself can be altered by chaining with standard graphics.js functions? Many thanks!

    [I should say that I am moving some mathematics notes from LaTeX/PDF to html, using MathJax for the mathematics. And I think that graphics.js would be perfect for my diagrams - once I understand it better!]

    opened by amca01 1
  • Placing text?

    Placing text?

    Hello,

    I have just discovered GraphicsJS - and it might be just what I need to create simple fixed graphics for the web. (I'm an academic, and I'm moving from PDF to HTML in the interests of accessibility). However, I often need to center text within a graphics element; say a rectangle. This could be easily done if there was a way of anchoring text by its center, rather than by the top left of its bounding box, I have fiddled with the hAlign parameter but not with much success. So what is the simplest method of centering text within a rectangle?

    And also - is there a way of telling GraphicsJS to use the same text as the surrounding web page? And so if the user (or browser) changes the text, that is also reflected in the GraphicsJS output?

    I apologise if these are simple questions, but I can't yet answer them myself. Many thanks!

    Alasdair

    opened by amca01 2
  • Add an arrow on the line

    Add an arrow on the line

    How to add an arrow on the line? I'm having a issue that I would like to paint a line in between of two path() objects and add an arrow at the end of the line indicates that one object points to the other. But I find no where on the manual script telling how to add the arrow. Can anybody help me on this? Thanks in advance!

    opened by MichelleCLiao 1
  • How to use graphics.js with Angular 6?

    How to use graphics.js with Angular 6?

    There is demo project for AnyChart intergration with angular 5, however, the same approach doesn't work for graphics.js. Attempt to import the library results in error:

    core.js:1633 ERROR Error: Uncaught (in promise): ReferenceError: acgraph is not defined

    installed the latest version 1.3.2 via npm

    opened by abudarevsky 10
  • Typescript Definitions ?

    Typescript Definitions ?

    New to GraphicsJS. Is it possible to provide typescript definitions? This would make using the library a breeze in Visual Studio Code or VIM with nice type checking, auto complete support and sane linting.

    Thanks for making this wonderful library open source!

    opened by lenkite 3
Releases(v1.3.5)
Owner
AnyChart
Robust JavaScript/HTML5 Chart library for any project
AnyChart
The JavaScript library for modern SVG graphics.

Snap.svg · A JavaScript SVG library for the modern web. Learn more at snapsvg.io. Follow us on Twitter. Install Bower - bower install snap.svg npm - n

Adobe Web Platform 13.6k Dec 30, 2022
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023
A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce comm

Metrics Graphics 7.5k Dec 22, 2022
A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce comm

Metrics Graphics 7.5k Dec 22, 2022
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 4k Dec 29, 2022
The lightweight library for manipulating and animating SVG

SVG.js A lightweight library for manipulating and animating SVG, without any dependencies. SVG.js is licensed under the terms of the MIT License. Inst

SVG.js 10k Dec 25, 2022
The lightweight library for manipulating and animating SVG

SVG.js A lightweight library for manipulating and animating SVG, without any dependencies. SVG.js is licensed under the terms of the MIT License. Inst

SVG.js 10k Jan 3, 2023
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Paper.js 13.5k Dec 30, 2022
Create graphics with a hand-drawn, sketchy, appearance

Rough.js Rough.js is a small (<9 kB) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw

Rough 17.8k Dec 30, 2022
A cross platform high-performance graphics system.

spritejs.org Spritejs is a cross platform high-performance graphics system, which can render graphics on web, node, desktop applications and mini-prog

null 5.1k Dec 24, 2022
Beautiful React SVG maps with d3-geo and topojson using a declarative api.

react-simple-maps Create beautiful SVG maps in react with d3-geo and topojson using a declarative api. Read the docs, or check out the examples. Why R

z creative labs 2.7k Dec 29, 2022
Easy-to-use js library for building graphs using svg.

LineChart Easy-to-use js library for building graphs using svg. Examples How to use Just add linechart.js from 'src' directory to your project. And ad

Korpusov Maxim 8 Nov 21, 2022
📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion

ApexCharts 12.1k Jan 3, 2023
JavaScript SVG parser and renderer on Canvas

canvg JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders

null 3.3k Jan 4, 2023
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

D3: Data-Driven Documents D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, C

D3 103.8k Jan 3, 2023
Simple, responsive, modern SVG Charts with zero dependencies

Frappe Charts GitHub-inspired modern, intuitive and responsive charts with zero dependencies Explore Demos » Edit at CodePen » Contents Installation U

Frappe 14.6k Jan 4, 2023