Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @antv/g2 with all npm packages installed. Try it out:

var g2 = require("@antv/g2")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@antv/g2 v4.0.15

the Grammar of Graphics in Javascript

English | 简体中文

G2

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 DocsBlog

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.
chart.data(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: https://github.com/antvis/G2/tree/v3.5.x
  • v3.6.x: https://github.com/antvis/G2/tree/v3.6.x

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free