Build Interactive Charts Fast with G2: A Hands‑On Guide

G2 is a visualization engine based on graphic grammar theory that lets developers create data‑driven, interactive charts with a single statement, supporting Canvas or SVG rendering.

Key point: It is easy to use and can produce interactive statistical charts that reflect business needs.

Example 01 – App active user distribution

import { Chart } from '@antv/g2';
const data = [
  { type: '未知', value: 654, percent: 0.02 },
  { type: '17 岁以下', value: 654, percent: 0.02 },
  { type: '18-24 岁', value: 4400, percent: 0.2 },
  { type: '25-29 岁', value: 5300, percent: 0.24 },
  { type: '30-39 岁', value: 6200, percent: 0.28 },
  { type: '40-49 岁', value: 3300, percent: 0.14 },
  { type: '50 岁以上', value: 1500, percent: 0.06 },
];
const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
  padding: [50, 20, 50, 20],
});
chart.data(data);
chart.scale('value', { alias: '销售额(万)' });
chart.axis('type', { tickLine: { alignTick: false } });
chart.axis('value', false);
chart.tooltip({ showMarkers: false });
chart.interval().position('type*value');
chart.interaction('element-active');

data.forEach(item => {
  chart.annotation().text({
    position: [item.type, item.value],
    content: item.value,
    style: { textAlign: 'center' },
    offsetY: -30,
  }).text({
    position: [item.type, item.value],
    content: (item.percent * 100).toFixed(0) + '%',
    style: { textAlign: 'center' },
    offsetY: -12,
  });
});
chart.render();

Example 02 – Enterprise cash flow

const data = [
  { year: '2013', value: -3.1 },
  { year: '2014', value: 0.8 },
  { year: '2015', value: 2.3 },
  { year: '2016', value: 3.5 },
  { year: '2017', value: 5.4 },
];

Example 03 – Dynamic bar chart (source of “Warwolf 3”)

import { Chart } from '@antv/g2';
const otherRatio = 6.67 / 100;
const otherOffsetAngle = otherRatio * Math.PI;
const data = [
  { type: '微博', value: 93.33 },
  { type: '其他', value: 6.67 },
];
const other = [
  { type: '论坛', value: 1.77 },
  { type: '网站', value: 1.44 },
  { type: '微信', value: 1.12 },
  { type: '客户端', value: 1.05 },
  { type: '新闻', value: 0.81 },
  { type: '视频', value: 0.39 },
  { type: '博客', value: 0.37 },
  { type: '报刊', value: 0.17 },
];
const chart = new Chart({ container: 'container', autoFit: true, height: 500 });
chart.legend(false);
chart.tooltip({ showMarkers: false });
// Additional configuration similar to Example 01

These examples demonstrate how G2 can quickly turn raw data into clear, interactive visualizations without dealing with low‑level drawing details.