Need help with G2?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

10.7K Stars 1.1K Forks MIT License 3.5K Commits 163 Opened issues


📊 A highly interactive data-driven visualization grammar for statistical charts.

Services available


Need anything else?

Contributors list

English | 简体中文


A highly interactive data-driven visualization grammar for statistical charts.

CI Coverage Status NPM Package NPM Downloads Dependencies Percentage of issues still open PRs Welcome

WebsiteTutorial DocsBlogG2Plot

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, you can describe the visual appearance and interactive behavior of a visualization just by one statement, and generate web-based views using Canvas or SVG.

📺 Live Demos

✨ Features

  • 💯Stable grammar of graphics: enable to draw all kinds of charts by mapping data to graphics.
  • 🤩New grammar of interaction: interaction behaviors combined with Trigger and Action mechanisms are used to exploring data.
  • 🦍Advanced View module: with the ability to develop customized multi-dimension data analysis graphics.
  • 👬Dual-engine rendering: with the ability to switch Canvas and SVG freely.
  • 💄Visual components: interaction-oriented, elegant experience.
  • 🛡Fully embrace Typescript: Complete type definition files are provided.

📦 Installation

$ npm install @antv/g2

🔨 Getting Started

Before drawing we need to prepare a DOM container for G2:

import { Chart } from '@antv/g2';

const data = [ { genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 }, ];

// Step 1: Create a Chart instance. const chart = new Chart({ container: 'c1', // Specify chart container ID width: 600, // Specify chart width height: 300, // Specify chart height });

// Step 2: Load the data.;

// Step 3: Declare the grammar of graphics, draw column chart. chart.interval().position('genre*sold');

// Step 4: Render chart. chart.render();

⌨️ Development

# Install dependencies
$ npm install

Run test cases

$ npm run test

Open electron to run test cases and listen to file changes

$ npm run test-live

Run CI

$ npm run ci

Run website

$ npm start

🏷️ Releases

  • v3.5.x:
  • v4.0.x:

You can also use G2Plot which is an interactive and responsive charting library based on G2. You can easily make superior statistical plots through a few lines of code.

🤝 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.

Let's fund issues in this repository

📧 Contact us

DingTalk Group: 30233731

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.