G2

There are currently two ways to use G2:

Package manager
CDN

Package manager

If you use Node-based packaging tools such as Webpack and Rollup, you can install G2 through package managers such as NPM or Yarn.

# Install via NPM
npm install @antv/g2

# Install via Yarn
yarn add @antv/g2

After successful installation, provide a container for G2:

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

Then enter the following code:

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

// Prepare data
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

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

// Declare visualization
chart
  .interval() // Create an Interval mark
  .data(data) // Bind data
  .encode('x', 'genre') // Encode x channel
  .encode('y', 'sold'); // Encode y channel

// Render visualization
chart.render();

CDN

G2 also provides a UMD version, which can be loaded directly through CDN and used directly. At this time, the Chart object can be accessed through the namespace G2.

<script src="https://unpkg.com/@antv/g2/dist/g2.min.js"></script>
<script>
  // Prepare data
  const data = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ];

  // Initialize chart instance
  const chart = new G2.Chart({
    container: 'container',
  });

  // Declare visualization
  chart
    .interval() // Create an Interval mark
    .data(data) // Bind data
    .encode('x', 'genre') // Encode x channel
    .encode('y', 'sold'); // Encode y channel

  // Render visualization
  chart.render();
</script>

The journey begins

No matter which method you use, if you draw a bar chart like the following, it means that everything is going well and the journey of exploring visualization and G2 has officially begun.

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

// Initialize chart instance

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

chart
  .interval()
  .data([
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ])
  .encode('x', 'genre')
  .encode('y', 'sold');

chart.render();

Using G2 in Frontend Frameworks

Using G2 in React

G2 provides a complete guide for using in React, including component encapsulation, data binding, state management best practices and example code

Using G2 in Vue

G2 provides method guides for using in Vue2 and Vue3, supporting both Options API and Composition API, with complete example code reference

Online Experience with G2

Chart Examples

Browse over 100+ chart examples covering bar charts, line charts, pie charts, scatter plots and more types. Experience G2's powerful features online without any environment setup

Chart Overview

Detailed introduction to 40+ chart types, including basic chart knowledge and applicable scenario analysis to help you quickly find the most suitable chart type, the best guide for beginners

FAQ

Frequently Asked Questions

Having problems? Check our compiled FAQ and solutions, including installation, configuration, API usage and other troubleshooting answers to quickly solve development issues

Getting Started with Development

Basic Knowledge

G2 Chart Composition

To better use G2 for data visualization, we need to understand the composition of G2 charts and related concepts, as well as chart layout knowledge

Chart Lifecycle

Basic usage and lifecycle management of Chart objects, including creating chart instances, configuring global options, mounting charts, rendering charts, updating charts, and chart cleanup and destruction

Chart API

Complete API reference documentation to easily create visualizations, render charts, get instances, trigger events and more. You can also configure charts through chained API calls

Drawing Graphics

Marks

The basic units of G2 drawing, including 30+ mark types such as points, lines, areas, text, etc. Any chart can be composed of one or more marks

Data Configuration and Transform

Supports convenient data source configuration with inline arrays, remote URLs, JSON/CSV formats, and multiple data transforms like filter, join, kde for easy data preprocessing before drawing

Encode

Maps data properties to visual channels (position, color, size, shape, etc.), serving as the key bridge connecting data and graphics

View

The core building unit of charts, used to carry and organize multiple marks, unified management of data, coordinate systems, interactions, styles and other configurations

Scale

The bridge that maps abstract data to visual data, providing linear, logarithmic, time and other types, determining how data is visualized

Transform

Unlike data preprocessing, mark transforms provide drawing-time transformations, including stacking, filtering, aggregation, sorting, grouping, jittering and other transformation methods, supporting complex data analysis and graphic optimization

Configuring Chart Components

Axis

The ruler of charts, establishing the mapping relationship between data and visual positions. Through ticks, tick labels, grid lines and other elements, it helps users correspond data numbers with chart positions. You can format tick values, adjust tick label positions, etc.

Legend

Auxiliary elements of charts, using color, size, shape to distinguish different data types. It's the visualization of scales corresponding to non-spatial channels (color, opacity, size, shape), supporting data filtering and interaction

Title

Specifies the chart title content, showing chart overview information in one sentence. Consists of main title and subtitle, customizable through text style adjustments, no title by default

Scrollbar

Solves the problem of chart information being too dense to display completely. Used when content exceeds the display area, can be bound to x or y channels to control the displayed partial content, disabled by default

Slider

A component to assist in viewing data, condensing large amounts of data onto one axis. It allows both macro view of data overview and micro view of segments, supporting drag to observe data evolution within a certain range, suitable for large data volume scenarios

Tooltip

One of the core components of chart interaction, dynamically displaying detailed information of data points (values, percentages, etc.), supporting multiple trigger methods like mouse hover, click, touch, enhancing chart interactivity and readability

Label

Means to add annotations to charts, including data points, connecting lines, text values and other elements. Through concise text explanations, it reduces misunderstandings, emphasizes key data or trends, and guides users to focus on important information

Layout and Interaction

Coordinate

Manages spatial position mapping, supporting multiple types like Cartesian coordinates, polar coordinates, 3D coordinates, etc., to achieve different visualization layouts

Interaction

Provides 20+ interaction methods, including hover tooltips, brush highlighting, zoom and pan, etc., enhancing data exploration experience

Composition

Supports multiple combination methods like faceting, repetition, layering, etc., easily building complex layouts like dashboards and small multiples

Styling and Beautification

Style

Fine control over visual styles of marks and views, supporting rich style properties like fill color, stroke, opacity, font, etc.

Color

Provides multiple color encoding methods and built-in color palettes, supporting categorical colors, continuous colors, custom palettes and other color schemes

Theme

Built-in multiple theme styles like Classic, Academy, etc., supporting theme customization and extension to quickly unify chart visual styles

Advanced Features

State

Configure styles for chart elements in different states like hover, select, etc., achieving rich interactive feedback effects

Event

Listen to chart lifecycle and user interaction events, get click data, rendering status and other information to implement custom interaction logic

Animate

Built-in multiple animation types like fadeIn, scaleIn, morphing, etc., supporting fine control of enter, update, exit animations

There are currently two ways to use G2:

Package manager
CDN

Package manager

If you use Node-based packaging tools such as Webpack and Rollup, you can install G2 through package managers such as NPM or Yarn.

# Install via NPM
npm install @antv/g2

# Install via Yarn
yarn add @antv/g2

After successful installation, provide a container for G2:

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

Then enter the following code:

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

// Prepare data
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

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

// Declare visualization
chart
  .interval() // Create an Interval mark
  .data(data) // Bind data
  .encode('x', 'genre') // Encode x channel
  .encode('y', 'sold'); // Encode y channel

// Render visualization
chart.render();

CDN

G2 also provides a UMD version, which can be loaded directly through CDN and used directly. At this time, the Chart object can be accessed through the namespace G2.

<script src="https://unpkg.com/@antv/g2/dist/g2.min.js"></script>
<script>
  // Prepare data
  const data = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ];

  // Initialize chart instance
  const chart = new G2.Chart({
    container: 'container',
  });

  // Declare visualization
  chart
    .interval() // Create an Interval mark
    .data(data) // Bind data
    .encode('x', 'genre') // Encode x channel
    .encode('y', 'sold'); // Encode y channel

  // Render visualization
  chart.render();
</script>

The journey begins

No matter which method you use, if you draw a bar chart like the following, it means that everything is going well and the journey of exploring visualization and G2 has officially begun.

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

// Initialize chart instance

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

chart
  .interval()
  .data([
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ])
  .encode('x', 'genre')
  .encode('y', 'sold');

chart.render();

Using G2 in Frontend Frameworks

Using G2 in React

G2 provides a complete guide for using in React, including component encapsulation, data binding, state management best practices and example code

Using G2 in Vue

G2 provides method guides for using in Vue2 and Vue3, supporting both Options API and Composition API, with complete example code reference

Online Experience with G2

Chart Examples

Browse over 100+ chart examples covering bar charts, line charts, pie charts, scatter plots and more types. Experience G2's powerful features online without any environment setup

Chart Overview

Detailed introduction to 40+ chart types, including basic chart knowledge and applicable scenario analysis to help you quickly find the most suitable chart type, the best guide for beginners

FAQ

Frequently Asked Questions

Having problems? Check our compiled FAQ and solutions, including installation, configuration, API usage and other troubleshooting answers to quickly solve development issues

Getting Started with Development

Basic Knowledge

G2 Chart Composition

To better use G2 for data visualization, we need to understand the composition of G2 charts and related concepts, as well as chart layout knowledge

Chart Lifecycle

Chart API

Complete API reference documentation to easily create visualizations, render charts, get instances, trigger events and more. You can also configure charts through chained API calls

Drawing Graphics

Marks

The basic units of G2 drawing, including 30+ mark types such as points, lines, areas, text, etc. Any chart can be composed of one or more marks

Data Configuration and Transform

Supports convenient data source configuration with inline arrays, remote URLs, JSON/CSV formats, and multiple data transforms like filter, join, kde for easy data preprocessing before drawing

Encode

Maps data properties to visual channels (position, color, size, shape, etc.), serving as the key bridge connecting data and graphics

View

The core building unit of charts, used to carry and organize multiple marks, unified management of data, coordinate systems, interactions, styles and other configurations

Scale

The bridge that maps abstract data to visual data, providing linear, logarithmic, time and other types, determining how data is visualized

Transform

Configuring Chart Components

Axis

Legend

Title

Specifies the chart title content, showing chart overview information in one sentence. Consists of main title and subtitle, customizable through text style adjustments, no title by default

Scrollbar

Slider

Tooltip

Label

Layout and Interaction

Coordinate

Manages spatial position mapping, supporting multiple types like Cartesian coordinates, polar coordinates, 3D coordinates, etc., to achieve different visualization layouts

Interaction

Provides 20+ interaction methods, including hover tooltips, brush highlighting, zoom and pan, etc., enhancing data exploration experience

Composition

Supports multiple combination methods like faceting, repetition, layering, etc., easily building complex layouts like dashboards and small multiples

Styling and Beautification

Style

Fine control over visual styles of marks and views, supporting rich style properties like fill color, stroke, opacity, font, etc.

Color

Provides multiple color encoding methods and built-in color palettes, supporting categorical colors, continuous colors, custom palettes and other color schemes

Theme

Built-in multiple theme styles like Classic, Academy, etc., supporting theme customization and extension to quickly unify chart visual styles

Advanced Features

State

Configure styles for chart elements in different states like hover, select, etc., achieving rich interactive feedback effects

Event

Listen to chart lifecycle and user interaction events, get click data, rendering status and other information to implement custom interaction logic

Animate

Built-in multiple animation types like fadeIn, scaleIn, morphing, etc., supporting fine control of enter, update, exit animations

G2

Get Started

G2

Get Started

Package manager

CDN

The journey begins

Using G2 in Frontend Frameworks

Online Experience with G2

FAQ

Getting Started with Development

Basic Knowledge

Drawing Graphics

Configuring Chart Components

Layout and Interaction

Styling and Beautification

Advanced Features

Package manager

CDN

The journey begins

Using G2 in Frontend Frameworks

Online Experience with G2

FAQ

Getting Started with Development

Basic Knowledge

Drawing Graphics

Configuring Chart Components

Layout and Interaction

Styling and Beautification

Advanced Features