node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »


G2: The Grammar of Graphics in JavaScript

NPM Package NPM Downloads Percentage of issues still open

G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms. With G2, users can describe the visual appearance of a visualization just by one statement.

Special thanks to Leland Wilkinson, the author of The Grammar Of Graphics, whose book served as the foundation for G2.

More details about G2.


$ npm install @antv/g2


<div id="c1"></div>
import G2 from '@antv/g2';
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 1150 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
const chart = new G2.Chart({
  container: 'c1',
  width: 500,
  height: 500

More examples



$ npm install
# run test case 
$ npm run test-live
# build watching file changes and run demos 
$ npm run dev
# run demos 
$ npm run demos

How to Contribute

Please let us know how can we help. Do check out issues for bug reports or suggestions first.

To become a contributor, please follow our contributing guide.