explaingit

antvis/g2

★ 12,550TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

G2 is a TypeScript charting library from Ant Financial that builds any statistical chart by composing data field mappings and visual properties, rather than selecting from a fixed list of named chart types.

Mindmap

mindmap
  root((repo))
    What It Does
      Data visualization
      Grammar of graphics
      Browser chart rendering
    Core Concept
      Data field mappings
      Visual property composition
      Any chart type possible
    Rendering Options
      Canvas mode
      SVG mode
      Interactive behaviors
    Ecosystem
      G2Plot higher-level wrapper
      AntV family of tools
      Enterprise Alibaba usage
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Render an interactive bar, line, or scatter chart in the browser by mapping data fields to visual axes and shapes.

USE CASE 2

Build custom statistical charts not available as standard types by composing G2's visual grammar primitives.

USE CASE 3

Add interactive tooltips and click-based filtering to a data dashboard.

Tech stack

TypeScriptCanvasSVG

Getting it running

Difficulty · easy Time to first run · 30min

In plain English

G2 is a TypeScript library for building interactive data charts in the browser, created and maintained by Ant Financial's data visualization team (AntV). It is built around the concept of a "grammar of graphics," which is a way of describing charts not as named types (bar chart, pie chart) but as combinations of data mappings and visual properties. This approach means the same library can produce almost any kind of statistical chart by composing its building blocks differently. To use G2, you provide data, then write a short declaration that maps your data fields to visual positions and shapes. The library handles drawing the result on screen using either Canvas or SVG, and you can switch between the two rendering modes depending on what your project needs. Charts built with G2 support interactive behaviors such as tooltips, filtering, and data exploration out of the box. The README is written primarily in Chinese and includes a code example showing how to render a bar chart: create a Chart object, load data into it, define that the x-axis maps to a category field and the y-axis to a numeric field, then call render. The example is brief and the full documentation lives on the project's external website. For developers who want standard chart types without writing grammar-level code, the project also maintains G2Plot, a higher-level library built on top of G2 that provides pre-configured chart components you configure through a plain settings object. G2 is part of the AntV family of open-source visualization tools and is used widely in enterprise applications developed within the Alibaba and Ant Financial ecosystem.

Copy-paste prompts

Prompt 1
Create a bar chart using antvis/g2 that maps a sales dataset to x-axis categories and y-axis values, with tooltips showing the exact figure on hover.
Prompt 2
Build a multi-series line chart in G2 that filters displayed data by date range when the user clicks a legend item.
Prompt 3
Show me when to use Canvas vs SVG rendering mode in G2 and how to switch between them in code.
Prompt 4
Migrate an existing G2Plot chart to raw G2 so I can control the grammar-level configuration directly.
Open on GitHub → Explain another repo

← antvis on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.