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 — это библиотека визуализации на основе грамматики для создания диаграмм, дашбордов, исследования данных и сторителлинга. Она вдохновлена книгой Лиланда Уилкинсона «The Grammar of Graphics».
Это библиотека диаграмм с фиксированными типами или что-то более гибкое?Она основана на грамматике, а не на типах: вместо выбора готовых типов диаграмм вы комбинируете метки, преобразования, шкалы, системы координат и композиции, чтобы построить любую визуализацию, включая анимации и интерактивность, управляемые данными.
Как добавить её в проект?Установите через npm или Yarn, затем импортируйте объект Chart из G2, чтобы начать описывать свою визуализацию.
Нужно ли что-то кроме npm, чтобы её использовать?Никакой особой среды выполнения не требуется, кроме Node.js и менеджера пакетов для установки; библиотека работает полностью в браузере и выводит графику через Canvas, SVG или WebGL.
Остаётся ли она простой, когда диаграммы усложняются?Базовые диаграммы создаются быстро благодаря лаконичным описаниям, так как G2 сама выводит недостающие детали. Но для расширенной настройки нужно освоить её полную грамматику меток, преобразований, шкал и координат.
Чем G2 отличается от обычных библиотек диаграмм?Вместо фиксированного набора типов диаграмм G2 использует составляемую грамматику меток, шкал, преобразований и координат. Это позволяет создавать собственные визуализации с анимациями и интерактивностью, управляемыми данными, а не выбирать из готовых шаблонов.
Что умеет рендерер, лежащий в основе G2?Рендерер G2, который называется G, выводит графику через Canvas, SVG или WebGL и поддерживает плагины для стилей, например рукописных диаграмм, а также работает с экосистемой D3.
Есть ли обёртка G2 для React?Да, «g2-react» предоставляет лёгкий компонент React для G2, а «ant-design-charts» строит библиотеку диаграмм для React на основе G2 вместе с G6, X6 и L7Plot.
Откуда взялось название G2?G2 назвали в честь книги Лиланда Уилкинсона «The Grammar of Graphics», которая с самого начала глубоко повлияла на библиотеку.
What are similar projects?recharts, d3, plotly.js, vega, G6, plotly.py, visx, apexcharts.js
Creator
antvis
Size
323.7 MB
Stars
12.6K
Age
10y
Commits · 90 Days