Get Started

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 and declare visualization
const chart = new Chart({
  container: 'container',
});

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

// 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 and declare visualization
  const chart = new G2.Chart({
    container: 'container',
  });

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

  // 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 and declare visualization
const chart = new Chart({
  container: 'container',
});

chart.options({
  type: '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', y: 'sold' },
});

chart.render();

Using G2 in Frontend Frameworks

Online Experience with G2

Chart ExamplesBrowse 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 setupView details →Chart OverviewDetailed 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 beginnersView details →

FAQ

Getting Started with Development

Basic Knowledge

Drawing Graphics

Configuring Chart Components

AxisThe 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.View details →LegendAuxiliary 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 interactionView details →TitleSpecifies 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 defaultView details →ScrollbarSolves 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 defaultView details →SliderA 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 scenariosView details →TooltipOne 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 readabilityView details →LabelMeans 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 informationView details →

Layout and Interaction

Styling and Beautification

Advanced Features