The project's README from github.com/antvis/G2. As one markdown file: README.md.
English | 简体中文
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:
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!
This project exists thanks to all the people who contribute.
And thank you to all our backers! 🙏
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}
}
MIT@AntV.