Fork me on GitHub

Getting Started

Download, install and run jsGraph in a nutshell


jsGraph can be downloaded and installed manually or via a package manager, such as npm or bower. The project is hosted on Github and the distribution files can be found there. jsGraph has no dependencies and can be utilized without jQuery.

Minified version

The full-featured, compact version of jsGraph, shipped with all plugins, shapes and series available

ES6 version

The source code without ES6 transpilation. Targets ES6-compatible browsers for specific applications

Source code

The compiled but not uglified source code can be used for testing purposes and bug reporting

Github repo

The project is hosted on Github, for those who want to contribute to the project. Come check it out !

Install with npm

Installing jsGraph from npm is an easy way to install jsGraph and keep it up to date

npm install node-jsgraph --save-dev

Install with bower

Alternatively, jsGraph is also available from the bower package manager

bower install jsgraph

Loading jsGraph into your browser

jsGraph is available both for direct inclusion or as an anonymous AMD module loadable with [requirejs]( It does not rely on external libraries, therefore does not necessarily have to be loaded after jQuery, for example.

Loading manually

Simply paste the script inclusion tag anywhere in your webpage. jsGraph loads synchronously, so if you place it the header part of your page, it will be readily available in the other scripts. When loaded manually, jsGraph creates a unique global object named Graph - the graph constructor - available from the window object.

<!-- Includes jsGraph library -->
<script src="path/to/jsgraph/jsgraph.min.js"></script>

Loading with requirejs

If you are using a AMD structure using requirejs or other, jsGraph will register itself as an anonymous module. To load it, just use:

require( [ 'path/to/jsgraph' ], function( Graph ) {
  // new Graph(); is available

In this case, the Graph object is not exposed to the window element anymore.

Your first graph

Creating a graph requires only a few lines of code, which involve:

Which translates into the following code:

var graph = new Graph("containerId"); // Also accepts a DOM element (but not a jQuery element);
graph.resize( width, height );	// Resizes the container

graph.newSerie( "serieName" ) // Creates a new serie
	.autoAxis()	// Assigns axes
	.setData( [ [ x1, y1 ], [ x2, y2 ], [ x3, y3 ], [ xn, yn ] ] ); // Set data

graph.draw(); // Draw