G2 README

The project's README from github.com/antvis/G2. As one markdown file: README.md.

English | 简体中文

G2: The Concise and Progressive Visualization Grammar

G2 is a visualization grammar for dashboard building, data exploration and storytelling.

antvis%2FG2 | Trendshift

Build Status Coverage Status npm Version npm Download npm License Ask DeepWiki

examples

G2 is named after Leland Wilkinson’s book The Grammar of Graphics and was profoundly inspired by it in the very beginning. Here are some resources you can begin with:

✨ Features

🔨 Getting Started

G2 is usually installed via a package manager such as npm or Yarn.

$ npm install @antv/g2

$ yarn add @antv/g2

The Chart object then can be imported from G2.

<div id="container"></div>

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

// A tabular data to be visualized.
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// Instantiate a new chart.
const chart = new Chart({
  container: 'container',
});

// Specify visualization.
chart
  .interval() // Create an interval mark and add it to the chart.
  .data(data) // Bind data for this mark.
  .encode('x', 'genre') // Assign genre column to x position channel.
  .encode('y', 'sold') // Assign sold column to y position channel.
  .encode('color', 'genre'); // Assign genre column to color channel.

// Render visualization.
chart.render();

If all goes well, you can get the following lovely bar chart!

example

🌍 Ecosystem

📮 Contributing

This project exists thanks to all the people who contribute.

And thank you to all our backers! 🙏

Contribution Leaderboard code

📑 Paper

Bairui Su, Zhiwei Wang, Zhifeng Lin, Xiaojuan Liao, Zihan Zhou, Minfeng Zhu, Wei Chen. G2: A customizable web-based framework for authoring interactive visualizations. Visual Informatics, 2026.

@article{su2026g2,
  author={Bairui Su, Zhiwei Wang, Zhifeng Lin, Xiaojuan Liao, Zihan Zhou, Minfeng Zhu, Wei Chen},
  title={G2: A customizable web-based framework for authoring interactive visualizations},
  journal={Visual Informatics},
  year={2026},
  url={https://doi.org/10.1016/j.visinf.2026.100307}
}

📄 License

MIT@AntV.

G2 (antvis/G2)

Searching Database…

12.6K ·GitHub
G2
What is this?G2 is a visualization grammar library for building charts, dashboards, data exploration, and storytelling, inspired by Leland Wilkinson's book 'The Grammar of Graphics'.
Is this a chart library with fixed chart types, or something more flexible?It is grammar-based rather than type-based: instead of picking from preset chart types, you compose marks, transforms, scales, coordinates, and compositions to build any visualization, including data-driven animations and interactions.
How do I add it to a project?Install it with npm or Yarn, then import the Chart object from G2 to start declaring your visualization.
Do I need anything beyond npm to use it?No special runtime is required beyond Node.js and a package manager to install it; it runs purely in the browser, rendering through Canvas, SVG, or WebGL.
Does it stay simple as charts get more complex?Basic charts are quick to build with concise declarations since G2 infers the rest, but unlocking advanced customization means learning its fuller grammar of marks, transforms, scales, and coordinates.
How is G2 different from typical charting libraries?Instead of a fixed set of chart types, G2 uses a composable grammar of marks, scales, transforms, and coordinates, letting you build custom visualizations with data-driven animations and interactions rather than picking from presets.
What does G2's underlying renderer support?G2's renderer, called G, draws to Canvas, SVG, or WebGL and supports plugins for styles like hand-drawn charts, embracing the D3 ecosystem.
Is there a React wrapper for G2?Yes, 'g2-react' provides a lightweight React component for G2, and 'ant-design-charts' builds a React chart library on top of G2 alongside G6, X6, and L7Plot.
Where does the name G2 come from?G2 is named after Leland Wilkinson's book 'The Grammar of Graphics', which profoundly inspired the library from the very beginning.
What are similar projects?recharts, d3, plotly.js, vega, G6, plotly.py, visx, apexcharts.js
Which topics is it in?interaction, grammar, d3, charting-library, chart, declarative, canvas, webgl, svg, visualization, graphics, data-visualization
Creator
antvis
Size
323.7 MB
Stars
12.6K
Updated
CommitOct 15Releasev5.4.8Jan 06
Age
10y
Commits · 90 Days