Guide · Open source

How to use G2: install and draw your first chart

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

G2 is an open-source TypeScript library for drawing charts and other data visualizations in web pages. You describe your data and how its fields map to visual properties such as position and color, and G2 works out the rest. This guide walks through installing it, rendering a first bar chart and understanding the main options, so you can build a working chart in a web page.

G2antvis/G2 · ★ 12.7k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure Node.js and npm or Yarn are installed, and that you have a web page or project to run the chart in.
2Install the package. Run npm install @antv/g2 or yarn add @antv/g2 in your project folder.
3Add a container. Place a div with an id, such as container, where the chart should appear.
4Import Chart. Import the Chart object from @antv/g2 in your script.
5Prepare data. Create an array of objects, one per row, with the fields you want to show.
6Describe the chart. Create a Chart on the container, then call options with a type, data and encode mapping fields to x, y and color.
7Render. Call render() to draw the chart in the page.

What G2 is and who it suits

G2 is a visualization grammar aimed at dashboard building, data exploration and storytelling. It can render with Canvas, SVG or WebGL, and supports animation and interaction.

It fits front-end developers adding charts to a web dashboard, and data analysts comfortable writing a little JavaScript. It is a code library, so it needs a web page to run in and is not a no-code tool.

Good fit: teams that want to customize chart behavior beyond preset chart types, or projects needing interactive or animated charts.
Poor fit: people who only need a few standard charts and prefer a ready-made tool, or projects that cannot use JavaScript or TypeScript.

Install G2 with npm or Yarn

G2 is usually installed via a package manager. You need Node.js and either npm or Yarn. Run one of the commands below in your project folder.

npm install @antv/g2

yarn add @antv/g2

Create a container element in your page

G2 draws into an HTML element. Add a div with an id to the page where the chart should appear. The example below uses the id container.

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

Draw your first bar chart

Import Chart from G2, prepare an array of rows, create a chart pointing at the container, then call options to describe the visualization. The interval mark draws bars. The encode object maps the genre column to the x position and color channels, and the sold column to the y position. Finally, call render to draw the chart.

The source notes that if everything is set up correctly, you get a bar chart with one bar per genre.

data: the rows to visualize, here an array of objects.
encode: assigns data columns to visual channels such as x, y and color.
render(): draws the chart once options are set.

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 },
];

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  data: data,
  encode: {
    x: 'genre',
    y: 'sold',
    color: 'genre',
  },
});

chart.render();

Understand how G2 is organised

G2 is built on a grammar of marks, transforms, scales, coordinates and compositions rather than a fixed list of chart types. Progressive usage means a concise declaration gets you a meaningful chart quickly, and you can configure much more for complex cases.

The project's own resources include an introduction, a large set of examples to copy from, interactive tutorials and a full API reference, all linked from the official homepage.

Introduction: an overview of G2 and its motivations.
Examples: demos you can learn from and copy.
Tutorials: case-driven guides to core concepts.
API Reference: documentation for all visualization components.

Extend G2 and use it in React

G2 offers a consistent mechanism to extend scales, transforms, marks and more. The ecosystem includes g2-react, a React component for G2, and ant-design-charts, a React chart library built on G2.

The README links these projects and a larger list of ecosystem entries in its discussions.

g2-react: a lightweight React component for G2 without extra features.
g2-extensions: official extensions such as 3D visualization and automated visual analytics.
ant-design-charts: a React chart library based on G2.

What people use it for

Adding a bar chart of sales by genre to a web dashboard
Building interactive or animated charts for data exploration
Creating custom chart behavior beyond preset chart types
Using G2 inside a React app through g2-react or ant-design-charts
Producing data-driven visual stories on a web page

Frequently asked questions

How do I install G2?

Install G2 with a package manager. Run npm install @antv/g2 with npm, or yarn add @antv/g2 with Yarn. You need Node.js and either npm or Yarn available.

Is G2 free to use?

G2 is released under the MIT licence, as stated in the project README. The licence text is held by AntV.

What do I need to run G2?

You need Node.js and npm or Yarn to install it, and a web page to render the chart in. G2 requires JavaScript or TypeScript, so projects that cannot use those are not a good fit.

Can I use G2 without writing code?

No. G2 is a code library and needs a web page to run in. If you want charts without coding, a ready-made chart tool is a better choice.

How does G2 compare with Apache ECharts, Chart.js, D3.js or Vega-Lite?

The source lists these as comparable projects but does not benchmark them. G2 emphasises a grammar of marks, transforms, scales and coordinates, with support for animation, interaction and Canvas, SVG or WebGL rendering. Check each project's documentation against your needs.

Where can I find examples and the API reference?

The official homepage at g2.antv.antgroup.com links to the introduction, a set of examples, tutorials and the API reference.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

G2 suits front-end developers and data analysts who write JavaScript or TypeScript and want charts they can customize, animate and make interactive. If you need a few standard charts without coding, or cannot use JavaScript, a ready-made chart tool will be simpler.

Install options & downloads