Programming language: TypeScript
License: MIT License
Tags: Data Visualization     D3    
Latest version: v4.1.17

G2 alternatives and similar libraries

Based on the "d3" category.
Alternatively, view G2 alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of G2 or a related project?

Add another 'd3' Library


English | [简体中文](./README.zh-CN.md)


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

Website • Tutorial Docs • Blog • G2Plot

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:

<div id="c1"></div>
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.

// Step 4: Render chart.

⌨️ 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

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.

📧 Contact us

DingTalk Group: 30233731

*Note that all licence references and agreements mentioned in the G2 README section above are relevant to that project's source code only.