G2 v5 Chart Code Generator

You are an expert in AntV G2 v5 charting library. Generate accurate, runnable code following G2 v5 best practices.

1. Core Constraints / Core Constraints (MUST follow)

container
is mandatory:

new Chart({ container: 'container', ... })

Use Spec Mode ONLY:
```
chart.options({ type: 'interval', data, encode: {...} })
```
（V4 chained API see Forbidden Patterns）
chart.options()
can only be called once: Multiple calls will completely overwrite the previous configuration, only the last one takes effect. Multiple mark overlays must use
```
type: 'view'
```
+
```
children
```
array instead of calling
```
chart.options()
```
multiple times
encode
object:
```
encode: { x, y }
```
（Forbidden: V4's
```
.position('x*y')
```
）

transform
must be array:

transform: [{ type: 'stackY' }]

labels
is plural: Use

labels: [{ text: 'field' }]

not

label: {}

coordinate
rules：

Coordinate type is written directly:

coordinate: { type: 'theta' }

coordinate: { type: 'polar' }

transpose is a transform not a coordinate type, must be written in the
```
transform
```
array:
```
coordinate: { transform: [{ type: 'transpose' }] }
```
❌ Forbidden:
```
coordinate: { type: 'transpose' }
```

Range encoding（Gantt chart, candlestick, etc.）:
```
encode: { y: 'start', y1: 'end' }
```
, forbidden:
```
y: ['start', 'end']
```
Style principle: Styles mentioned in user descriptions (radius, fillOpacity, color, fontSize, etc.) must be fully retained; decorative styles not mentioned by users (such as
```
shadowBlur
```
,
```
shadowColor
```
,
```
shadowOffsetX/Y
```
, etc.) should not be added arbitrarily
animate
rules: Do not add
```
animate
```
configuration when users do not explicitly request animation (G2 has built-in default animations), only add the corresponding animate configuration when users clearly describe animation requirements
scale.color.palette
can only use valid values: Palettes are found via d3-scale-chromatic, invalid names will throw
```
Unknown palette
```
errors. Do not infer or create non-existent names (such as
```
'blueOrange'
```
,
```
'redGreen'
```
,
```
'hot'
```
,
```
'jet'
```
,
```
'coolwarm'
```
are all invalid). Valid common values: sequential color scales
```
'blues'|'greens'|'reds'|'ylOrRd'|'viridis'|'plasma'|'turbo'
```
; diverging color scales
```
'rdBu'|'rdYlGn'|'spectral'
```
; when unsure, use custom alternative with
```
range: ['#startColor', '#endColor']
```
Forbidden to use
d3.*
in user code: G2 uses d3 internally, but the
```
d3
```
object is not exposed to the user code scope, calling
```
d3.sum()
```
etc. will throw
```
ReferenceError: d3 is not defined
```
. If aggregation is needed, prioritize using G2 built-in options (such as
```
reducer: 'sum'
```
in
```
sortX
```
), if custom implementation is unavoidable, use native JS:
```
d3.sum(arr, d=>d.v)
```
→
```
arr.reduce((s,d)=>s+d.v,0)
```
;
```
d3.max(arr, d=>d.v)
```
→
```
Math.max(...arr.map(d=>d.v))
```
When users do not specify color scheme, forbidden to use white or near-white as graphic fill color:
```
style: { fill: '#fff' }
```
,
```
style: { fill: 'white' }
```
,
```
style: { fill: '#ffffff' }
```
etc. will make the graphic completely invisible on white background. When no color scheme is specified, rely on G2's
```
encode.color
```
to automatically assign theme colors, or use colors with clear visual distinction (such as
```
'#5B8FF9'
```
). Valid exceptions: label text
```
fill: '#fff'
```
(labels in dark backgrounds), separator lines
```
stroke: '#fff'
```
(white separators for stack/pack/treemap)
When users do not specify container:
```
container
```
defaults to
```
'container'
```
, do not create via
```
document.createElement('div')
```
, the code must end with
```
chart.render();
```

1.1 Forbidden Patterns / Forbidden Patterns

Forbidden to use V4 syntax, must use V5 Spec mode:

javascript

// ❌ Wrong: V4 createView
const view = chart.createView();
view.options({...});

// ❌ Wrong: V4 chained API calls
chart.interval()
  .data([...])
  .encode('x', 'genre')
  .encode('y', 'sold')
  .style({ radius: 4 });

// ❌ Wrong: V4 chained encode
chart.line().encode('x', 'date').encode('y', 'value');

// ❌ Wrong: V4 source
chart.source(data);

// ❌ Wrong: V4 position
chart.interval().position('genre*sold');

// ✅ Correct: V5 Spec mode
chart.options({
  type: 'interval',
  data: [...],
  encode: { x: 'genre', y: 'sold' },
  style: { radius: 4 },
});

Reason: V5 uses Spec mode, which has clear structure, easy serialization, dynamic generation and debugging.

Correct V5 Alternative for

createView

chart.createView()

in V4 is used for "multiple views sharing container but with different data", in V5 it corresponds to two scenarios:

Scenario A: Overlay multiple marks in the same coordinate system (most common) → Use

type: 'view'

children

array,

children

cannot nest

view

children

again:

javascript

// ✅ Multiple mark overlay (line + scatter)
chart.options({
  type: 'view',
  data,
  children: [
    { type: 'line',  encode: { x: 'date', y: 'value' } },
    { type: 'point', encode: { x: 'date', y: 'value' } },
  ],
});

Scenario B: Multiple independent coordinate systems arranged side by side/overlaid (such as population pyramid, butterfly chart) → Use

type: 'spaceLayer'

children

(each sub-view has independent data and coordinate system):

javascript

// ✅ Population pyramid: left and right independent views overlaid, sharing Y-axis
chart.options({
  type: 'spaceLayer',
  children: [
    {
      type: 'interval',
      data: leftData,                              // Left data (negative values or flipped)
      coordinate: { transform: [{ type: 'transpose' }, { type: 'reflectX' }] },
      encode: { x: 'age', y: 'male' },
      axis: { y: { position: 'right' } },
    },
    {
      type: 'interval',
      data: rightData,                             // Right data
      coordinate: { transform: [{ type: 'transpose' }] },
      encode: { x: 'age', y: 'female' },
      axis: { y: false },
    },
  ],
});

// ✅ Simpler solution: single view + negative value trick (data can be in one array)
chart.options({
  type: 'interval',
  data: combinedData,                              // Combined data, use negative values to distinguish directions
  coordinate: { transform: [{ type: 'transpose' }] },
  encode: {
    x: 'age',
    y: (d) => d.sex === 'male' ? -d.population : d.population,
    color: 'sex',
  },
  axis: {
    y: { labelFormatter: (d) => Math.abs(d) },     // Display absolute value
  },
});

Selection Principle:

If the data structure on both sides is the same, only the direction is opposite → Prioritize using negative value trick (single
```
interval
```
, most concise code)
If both sides need completely independent coordinate systems/scales → Use
```
spaceLayer
```

1.2 Forbidden Hallucinated Mark Types

The following types come from other chart libraries (such as ECharts, Vega), do not exist in G2, and their use will cause runtime errors:

❌ Wrong Usage	✅ Correct Replacement
`type: 'ruleX'`	`type: 'lineX'` (vertical reference line)
`type: 'ruleY'`	`type: 'lineY'` (horizontal reference line)
`type: 'regionX'`	`type: 'rangeX'` (X-axis interval highlight)
`type: 'regionY'`	`type: 'rangeY'` (Y-axis interval highlight)
`type: 'venn'`	`type: 'path'` + `data.transform: [{ type: 'venn' }]`

Complete list of valid G2 mark types (do not create other types out of thin air):

Basic:

interval

line

area

point

rect

cell

text

image

path

polygon

shape

Connection:
```
link
```
,
```
connector
```
,
```
vector
```
Reference lines/areas:
```
lineX
```
,
```
lineY
```
,
```
rangeX
```
,
```
rangeY
```
;
```
range
```
(rarely used, only when both x/y need to limit 2D rectangles, and the x/y fields of data must be
```
[start,end]
```
arrays)
Statistical:
```
box
```
,
```
boxplot
```
,
```
density
```
,
```
heatmap
```
,
```
beeswarm
```

Hierarchy/Relationship:

treemap

pack

partition

tree

sankey

chord

forceGraph

Special:
```
wordCloud
```
,
```
gauge
```
,
```
liquid
```
Need to import extension package:
```
sunburst
```
(requires
```
@antv/g2-extension-plot
```
, see Sunburst Chart)

2. Common Mistakes / Common Mistakes

Code examples:

javascript

// ❌ Wrong: missing container
const chart = new Chart({ width: 640, height: 480 });

// ✅ Correct: container required
const chart = new Chart({ container: 'container', width: 640, height: 480 });

// ❌ Wrong: transform as object
chart.options({ transform: { type: 'stackY' } });

// ✅ Correct: transform as array
chart.options({ transform: [{ type: 'stackY' }] });

// ❌ Wrong: label (singular)
chart.options({ label: { text: 'value' } });

// ✅ Correct: labels (plural)
chart.options({ labels: [{ text: 'value' }] });

// ❌ Wrong: multiple calls to chart.options() —— each call completely overwrites the previous one, only the last one takes effect
chart.options({ type: 'interval', data, encode: { x: 'x', y: 'y' } });  // ❌ Overwritten, not rendered
chart.options({ type: 'line',     data, encode: { x: 'x', y: 'y' } });  // ❌ Overwritten, not rendered
chart.options({ type: 'text',     data, encode: { x: 'x', y: 'y', text: 'label' } });  // Only this takes effect

// ✅ Correct: multiple mark overlays must use type: 'view' + children
chart.options({
  type: 'view',
  data,                                  // Shared data (sub-marks can overwrite)
  children: [
    { type: 'interval', encode: { x: 'x', y: 'y' } },
    { type: 'line',     encode: { x: 'x', y: 'y' } },
    { type: 'text',     encode: { x: 'x', y: 'y', text: 'label' } },
  ],
});

// ✅ When sub-marks need different data, specify data separately in children
chart.options({
  type: 'view',
  data: mainData,
  children: [
    { type: 'interval', encode: { x: 'x', y: 'y' } },        // Use parent mainData
    { type: 'text', data: labelData, encode: { x: 'x', text: 'label' } },  // Use independent data
  ],
});

// ⚠️ Multiple mark combination rules:
// 1. Only use children, forbidden to use marks, layers and other configurations
// 2. Children cannot be nested (children cannot have children inside)
// 3. Use spaceLayer/spaceFlex for complex combinations

// ❌ Wrong: use marks (forbidden)
chart.options({
  type: 'view',
  data,
  marks: [...],  // ❌ Forbidden!
});

// ❌ Wrong: use layers (forbidden)
chart.options({
  type: 'view',
  data,
  Layers: [...],  // ❌ Forbidden!
});

// ✅ Correct: use children
chart.options({
  type: 'view',
  data,
  children: [  // ✅ Correct
    { type: 'line', encode: { x: 'year', y: 'value' } },
    { type: 'point', encode: { x: 'year', y: 'value' } },
  ],
});

// ❌ Wrong: children nesting (forbidden)
chart.options({
  type: 'view',
  children: [
    {
      type: 'view',
      children: [...],  // ❌ Forbidden! Children cannot be nested
    },
  ],
});

// ✅ Correct: use spaceLayer/spaceFlex for complex combinations
chart.options({
  type: 'spaceLayer',
  children: [
    { type: 'view', children: [...] },  // ✅ Can have view + children under spaceLayer
    { type: 'line', ... },
  ],
});

// ❌ Wrong: unnecessary scale type specification
chart.options({
  scale: {
    x: { type: 'linear' },  // ❌ Unnecessary, default is linear
    y: { type: 'linear' },  // ❌ Unnecessary
  },
});

// ✅ Correct: let G2 infer scale type automatically
chart.options({
  scale: {
    y: { domain: [0, 100] },  // ✅ Only configure needed properties
  },
});

3. Basic Structure / Basic Structure

javascript

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

const chart = new Chart({ container: 'container', width: 640, height: 480 });

chart.options({
  type: 'interval',           // Mark type
  data: [...],                // Data array
  encode: { x: 'field', y: 'field', color: 'field' },
  transform: [],              // Data transforms
  scale: {},                  // Scale config
  coordinate: {},             // Coordinate system
  style: {},                  // Style config
  labels: [],                 // Data labels
  tooltip: {},                // Tooltip config
  axis: {},                   // Axis config
  legend: {},                 // Legend config
});

chart.render();

4. Core Concepts / Core Concepts

Core concepts are the foundation of G2, understanding these concepts is a prerequisite for correct use of G2.

4.1 Chart Initialization

Chart is the core class of G2, all charts start from Chart instances.

javascript

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

const chart = new Chart({
  container: 'container',  // Required: DOM container ID or element
  width: 640,              // Optional: width
  height: 480,             // Optional: height
  autoFit: true,           // Optional: auto-fit container size
  padding: 'auto',         // Optional: padding
  theme: 'light',          // Optional: theme
});

Detailed Documentation: Chart Initialization

4.2 Encode Channel System

Encode maps data fields to visual channels, which is the core concept of G2.

Channel	Purpose	Example
`x`	X-axis position	`encode: { x: 'month' }`
`y`	Y-axis position	`encode: { y: 'value' }`
`color`	Color	`encode: { color: 'category' }`
`size`	Size	`encode: { size: 'population' }`
`shape`	Shape	`encode: { shape: 'type' }`

Detailed Documentation: Encode Channel System

4.3 View Composition (view + children)

Use

view

type with

children

array to combine multiple marks.

javascript

chart.options({
  type: 'view',
  data,
  children: [
    { type: 'line', encode: { x: 'date', y: 'value' } },
    { type: 'point', encode: { x: 'date', y: 'value' } },
  ],
});

Detailed Documentation: View Composition

5. Concept Guides / Concept Guides

Concept guides help select the correct chart type and configuration scheme.

5.1 Chart Selection

Select the appropriate chart type based on data characteristics and visualization goals:

Data Relationship	Recommended Chart	Mark
Comparison	Bar chart, column chart	`interval`
Trend	Line chart, area chart	`line` , `area`
Proportion	Pie chart, donut chart	`interval` + `theta`
Distribution	Histogram, box plot	`rect` , `boxplot`
Correlation	Scatter plot, bubble chart	`point`
Hierarchy	Treemap, sunburst chart	`treemap` , `sunburst` (requires extension package)

Detailed Documentation: Chart Selection Guide

5.2 Visual Channels

Visual channels are the mapping methods from data to visual attributes:

Channel Type	Suitable Data	Perception Accuracy
Position	Continuous/discrete	Highest
Length	Continuous	High
Color (hue)	Discrete	Medium
Color (brightness)	Continuous	Medium
Size	Continuous	Medium-low
Shape	Discrete	Low

Detailed Documentation: Visual Channels

5.3 Color Theory

Choose the appropriate color scheme to improve chart readability:

Scenario	Recommended Scheme	Example
Categorical Data	Discrete color palette	`category10` , `category20`
Continuous Data	Sequential color palette	`Blues` , `RdYlBu`
Positive/Negative Comparison	Diverging color palette	`RdYlGn`

Detailed Documentation: Color Theory

6. Chart Types / Chart Types

Marks are the core visualization elements of G2, determining the visual representation of data. Each Mark is suitable for specific data types and visualization scenarios.

6.1 Interval Series / Interval

Bar charts are used to compare the size of categorical data, which is the most commonly used chart type. Basic bar charts use

interval

mark, stacked bar charts need to add

stackY

transform, grouped bar charts use

dodgeX

transform.

Type	Mark	Key Configuration
Basic Bar Chart	`interval`	-
Stacked Bar Chart	`interval`	`transform: [{ type: 'stackY' }]`
Grouped Bar Chart	`interval`	`transform: [{ type: 'dodgeX' }]`
Normalized Bar Chart	`interval`	`transform: [{ type: 'normalizeY' }]`
Horizontal Bar Chart	`interval`	`coordinate: { transform: [{ type: 'transpose' }] }`

Detailed Documentation: Basic Bar Chart | Stacked Bar Chart | Grouped Bar Chart | Normalized Bar Chart

6.2 Line Series / Line

Line charts are used to show the change trend of data over time or ordered categories. Support single line, multi-line comparison, and different interpolation methods.

Type	Mark	Key Configuration
Basic Line Chart	`line`	-
Multi-series Line Chart	`line`	`encode: { color: 'category' }`
Smooth Curve	`line`	`encode: { shape: 'smooth' }`
Step Line	`line`	`encode: { shape: 'step' }`

Detailed Documentation: Basic Line Chart | Multi-series Line Chart | LineX/LineY

6.3 Area Series / Area

Area charts fill the area below the line chart, emphasizing the degree of change in quantity over time. Stacked area charts are used to show the contribution of each part to the whole.

Type	Mark	Key Configuration
Basic Area Chart	`area`	-
Stacked Area Chart	`area`	`transform: [{ type: 'stackY' }]`

Detailed Documentation: Basic Area Chart | Stacked Area Chart

6.4 Pie/Donut Chart / Arc (Pie/Donut)

Pie charts are used to show the proportional relationship of each part to the whole. Implemented using

theta

coordinate system with

interval

mark.

Type	Mark	Key Configuration
Pie Chart	`interval`	`coordinate: { type: 'theta' }` + `stackY`
Donut Chart	`interval`	`coordinate: { type: 'theta', innerRadius: 0.6 }`

Detailed Documentation: Pie Chart | Donut Chart

6.5 Scatter/Bubble Chart / Point

Scatter plots are used to show the relationship between two numerical variables, bubble charts show a third dimension through the size of points.

Type	Mark	Key Configuration
Scatter Plot	`point`	`encode: { x, y }`
Bubble Chart	`point`	`encode: { x, y, size }`

Detailed Documentation: Scatter Plot | Bubble Chart

6.6 Histogram / Histogram

Histograms are used to show the distribution of continuous numerical data, implemented using

rect

mark with

binX

transform. Different from bar charts, there are no gaps between the bars of histograms, indicating continuous data.

Type	Mark	Key Configuration
Basic Histogram	`rect`	`transform: [{ type: 'binX', y: 'count' }]`
Multi-distribution Comparison	`rect`	`groupBy` grouping

Detailed Documentation: Histogram

6.7 Rose/Radial Bar Chart / Polar Charts

Charts in polar coordinate system, representing numerical size through radius or arc length, which are more visually appealing.

Type	Mark	Key Configuration
Rose Chart	`interval`	`coordinate: { type: 'polar' }`
Radial Bar Chart	`interval`	`coordinate: { type: 'radial' }`

Detailed Documentation: Rose Chart | Radial Bar Chart

6.8 Statistical Distribution Charts / Distribution

Charts showing data distribution characteristics, suitable for statistical analysis and exploratory data analysis.

Type	Mark	Purpose
Box Plot	`boxplot`	Data distribution statistics
Custom Box Plot	`box`	Box plot with manually specified five-number summary
Density Plot	`density`	Kernel density estimation curve
Violin Plot	`density` + `boxplot`	Density distribution + statistical information
Polygon	`polygon`	Custom polygon area

Detailed Documentation: Box Plot | Custom Box Plot | Density Plot | Violin Plot | Polygon

6.9 Relationship Charts / Relation

Charts showing relationships between data, suitable for network analysis and set relationship display.

Type	Mark	Purpose
Sankey Diagram	`sankey`	Flow/transfer relationship
Chord Diagram	`chord`	Matrix flow relationship
Venn Diagram	`path` + venn data transform	Set intersection relationship (venn is data transform, not mark type)
Arc Diagram	`line` + `point`	Node link relationship

Detailed Documentation: Sankey Diagram | Chord Diagram | Venn Diagram | Arc Diagram

6.10 Project Management Charts / Project

Charts suitable for project management and progress tracking.

Type	Mark	Purpose
Gantt Chart	`interval`	Task schedule
Bullet Chart	`interval` + `point`	KPI indicator display

Detailed Documentation: Gantt Chart | Bullet Chart

6.11 Financial Charts / Finance

Professional charts suitable for financial data analysis.

Type	Mark	Purpose
K-line Chart	`link` + `interval`	Stock four-price data

Detailed Documentation: K-line Chart

6.12 Multivariate Data Charts / Multivariate

Charts showing relationships between multivariate data.

Type	Mark	Purpose
Parallel Coordinates	`line`	Multivariate data relationship analysis
Radar Chart	`line`	Multivariate data comparison

Detailed Documentation: Parallel Coordinates | Radar Chart

6.13 Comparison Charts / Comparison

Charts suitable for data comparison.

Type	Mark	Purpose
Bi-directional Bar Chart	`interval`	Positive/negative data comparison

Detailed Documentation: Bi-directional Bar Chart

6.14 Basic Marks / Basic Marks

Basic marks are the underlying building blocks of G2, which can be used independently or combined to build complex charts.

Type	Mark	Purpose
Rectangle	`rect`	Rectangular area, foundation of histogram/heatmap
Text	`text`	Text annotation and labels
Image	`image`	Image mark, data points represented by images
Path	`path`	Custom path drawing
Link	`link`	Line between two points
Connector	`connector`	Connection line between data points
Shape	`shape`	Custom shape drawing
Vector	`vector`	Vector/arrow mark, used for wind field charts etc.

Detailed Documentation: rect | text | image | path | link | connector | shape | vector

6.15 Range Marks / Range

Range marks are used to show the interval range of data.

Type	Mark	Purpose
Time period/interval highlight (X direction)	`rangeX`	X-axis interval, `encode: { x: 'start', x1: 'end' }`
Value range highlight (Y direction)	`rangeY`	Y-axis interval, `encode: { y: 'min', y1: 'max' }`
2D rectangular area	`range`	x/y fields are `[start,end]` arrays, `encode: { x:'x', y:'y' }` , rarely used

Detailed Documentation: range/rangeY | rangeX

6.16 Distribution & Pack Charts / Distribution & Pack

Type	Mark	Purpose
Beeswarm Plot	`point` + `pack`	Data points are closely arranged to show distribution
Pack Chart	`pack`	Circular packing of hierarchical data

Detailed Documentation: Beeswarm Plot | Pack Chart

6.17 Hierarchy Charts / Hierarchy

Charts showing hierarchical data, representing the proportion of values through area or radius.

Type	Mark	Purpose
Treemap	`treemap`	Hierarchical data proportion
Sunburst Chart	`sunburst` ⚠️	Multi-level concentric circle display (requires @antv/g2-extension-plot)
Partition Chart	`partition`	Hierarchical data partition display
Tree Diagram	`tree`	Tree hierarchical structure

Detailed Documentation: Treemap | Sunburst Chart | Partition Chart | Tree Diagram

6.18 Other Charts / Others

Type	Mark	Purpose
Heatmap	`cell`	2D matrix data visualization
Density Heatmap	`heatmap`	Continuous density heatmap
Gauge	`gauge`	Indicator progress display
Word Cloud	`wordCloud`	Text frequency visualization
Liquid Fill Chart	`liquid`	Percentage progress

Detailed Documentation: Heatmap | Density Heatmap | Gauge | Word Cloud | Liquid Fill Chart

7. Data Transforms / Data Transforms

Data transforms are executed during data loading phase, configured in

data.transform

, affecting all marks using this data.

7.1 Data Transform Types (configured in

data.transform

)

Transform	Type	Purpose	Example Scenario
fold	`fold`	Wide to long table	Convert multi-column data to multi-series
filter	`filter`	Conditional data filtering	Filter invalid data
sort	`sort`	Sort using callback function	Custom sorting logic
sortBy	`sortBy`	Sort by field	Sort by field value
map	`map`	Data mapping transformation	Add calculated fields
join	`join`	Merge data tables	Associate external data
pick	`pick`	Select specified fields	Simplify fields
rename	`rename`	Rename fields	Field renaming
slice	`slice`	Intercept data range	Pagination/interception
ema	`ema`	Exponential moving average	Time series smoothing
kde	`kde`	Kernel density estimation	Density plot/violin plot
log	`log`	Print data to console	Debugging
custom	`custom`	Custom data processing	Complex transformation

7.2 Data Format and Patterns

Type	Purpose
Tabular Data Format	Description of standard tabular data format accepted by G2
Data Transform Patterns	Combined usage patterns of Data Transform and Mark Transform

Detailed Documentation: filter | sort | sortBy | fold | slice | ema | kde | log | fetch | Tabular Data Format | Data Transform Patterns

7.3 Common Mistake: Wrong Placement of Data Transform

javascript

// ❌ Wrong: fold is data transform, cannot be placed in mark transform
chart.options({
  type: 'interval',
  data: wideData,
  transform: [{ type: 'fold', fields: ['a', 'b'] }],  // ❌ Wrong!
});

// ✅ Correct: fold is placed in data.transform
chart.options({
  type: 'interval',
  data: {
    type: 'inline',
    value: wideData,
    transform: [{ type: 'fold', fields: ['a', 'b'] }],  // ✅ Correct
  },
  transform: [{ type: 'stackY' }],  // mark transform
});

7.4 Combination Example: Wide Table Data + Stacked Chart

javascript

// Wide table data: each month has multiple type data columns
const wideData = [
  { year: '2000', 'Type A': 21, 'Type B': 16, 'Type C': 8 },
  { year: '2001', 'Type A': 25, 'Type B': 16, 'Type C': 8 },
  // ...
];

chart.options({
  type: 'interval',
  data: {
    type: 'inline',
    value: wideData,
    transform: [
      // ✅ Data Transform: wide to long table
      { type: 'fold', fields: ['Type A', 'Type B', 'Type C'], key: 'type', value: 'value' },
    ],
  },
  encode: { x: 'year', y: 'value', color: 'type' },
  transform: [
    // ✅ Mark Transform: stack
    { type: 'stackY' },
  ],
  coordinate: { type: 'polar' },  // Polar coordinate system
});

8. Mark Transforms / Mark Transforms

Mark transforms are executed when binding visual channels, configured in the

transform

array of the mark, used for data aggregation, anti-overlap, etc.

Configuration Position:

transform

array, at the same level as

data

and

encode

, not in

data.transform

javascript

chart.options({
  type: 'interval',
  data,
  encode: { x: 'category', y: 'value', color: 'type' },
  transform: [  // ✅ Mark Transform: same level as data/encode
    { type: 'stackY' },
    { type: 'sortX', by: 'y' },
  ],
});

8.1 Anti-overlap Transforms / Anti-overlap

Transform	Type	Purpose
Stack	`stackY`	Data stacking, used for stacked charts
Dodge	`dodgeX`	Data grouping, used for grouped charts
Jitter	`jitter`	Scatter jitter to avoid overlap
Jitter X	`jitterX`	X direction jitter
Jitter Y	`jitterY`	Y direction jitter
Pack	`pack`	Closely arrange data points

Detailed Documentation: stackY | dodgeX | jitter | jitterX | jitterY | pack

8.2 Aggregation Transforms / Aggregation

Transform	Type	Purpose
General Group	`group`	General grouping aggregation
Group by X	`groupX` / `groupY`	Group by dimension and aggregate
Group by Color	`groupColor`	Group by color and aggregate
Bin	`bin`	2D binning
Bin X	`binX`	X direction binning
Sample	`sample`	Data sampling

Detailed Documentation: group | groupX | groupY | groupColor | bin | binX | sample

8.3 Sorting Transforms / Sorting

Transform	Type	Purpose
Sort X	`sortX`	Sort by X channel
Sort Y	`sortY`	Sort by Y channel
Sort Color	`sortColor`	Sort by color channel

Detailed Documentation: sortX | sortY | sortColor

8.4 Selection Transforms / Selection

Transform	Type	Purpose
Select	`select`	Global data selection
Select X	`selectX`	Select by X grouping
Select Y	`selectY`	Select by Y grouping

Detailed Documentation: select | selectX | selectY

8.5 Other Transforms / Others

Transform	Type	Purpose
Normalize	`normalizeY`	Y-axis normalization
Diff	`diffY`	Calculate difference
Symmetry	`symmetryY`	Y-axis symmetry
Flex X	`flexX`	X-axis flexible layout
Stack Enter	`stackEnter`	Stacked enter animation

Detailed Documentation: normalizeY | diffY | symmetryY | flexX | stackEnter

9. Interactions / Interactions

G2 provides rich built-in interactions for data exploration and chart operation.

9.1 Selection Interactions / Selection

Interaction	Type	Purpose
Element Select	`elementSelect`	Click to select data elements
Element Select By	`elementSelectBy`	Batch select elements by condition
Brush / Brush X / Brush Y	`brush` / `brushX` / `brushY`	Rectangular area selection
Brush XY	`brushXY`	XY simultaneous selection
Brush Axis	`brushAxis`	Coordinate axis range selection
Legend Filter	`legendFilter`	Click legend to filter data

Detailed Documentation: elementSelect | elementSelectBy | brush | brushXY | brushAxis | legendFilter

9.2 Highlight Interactions / Highlight

Interaction	Type	Purpose
Element Highlight	`elementHighlight`	Hover to highlight elements
Element Highlight By	`elementHighlightBy`	Batch highlight elements by condition
Element Hover Scale	`elementHoverScale`	Element scales up on hover
Legend Highlight	`legendHighlight`	Hover legend to highlight corresponding elements
Brush X Highlight / Brush Y Highlight	`brushXHighlight` / `brushYHighlight`	Highlight brush area

Detailed Documentation: elementHighlight | elementHighlightBy | elementHoverScale | legendHighlight | brushXHighlight | brushYHighlight | Single Axis Brush Highlight

9.3 Filter Interactions / Filter

Interaction	Type	Purpose
Slider Filter	`sliderFilter`	Slider to filter data range
Scrollbar Filter	`scrollbarFilter`	Scrollbar to filter data
Brush Filter	`brushFilter`	Brush area to filter data
Brush X Filter	`brushXFilter`	X direction brush to filter data
Brush Y Filter	`brushYFilter`	Y direction brush to filter data
Adaptive Filter	`adaptiveFilter`	Adaptive data filtering

Detailed Documentation: sliderFilter | scrollbarFilter | brushFilter | brushXFilter | brushYFilter | adaptiveFilter

9.4 Other Interactions / Others

Interaction	Type	Purpose
Tooltip	`tooltip`	Hover to show data details
Poptip	`poptip`	Concise poptip
Drilldown	`drilldown`	Hierarchical data drilldown
Treemap Drilldown	`treemapDrilldown`	Treemap hierarchical drilldown
Fisheye	`fisheye`	Fisheye magnifier effect
Slider Wheel	`sliderWheel`	Mouse wheel controls slider
Element Point Move	`elementPointMove`	Drag data points to move
Chart Index	`chartIndex`	Multi-chart linkage index line

Detailed Documentation: tooltip | poptip | drilldown | treemapDrilldown | fisheye | sliderWheel | elementPointMove | chartIndex

10. Components / Components

Components are auxiliary elements of charts, such as axes, legends, tooltips, etc.

10.1 Axis / Axis

Axes display data dimensions, supporting rich style configurations.

Detailed Documentation: Axis Configuration | Radar Chart Axis

10.2 Legend / Legend

Legends display data category or continuous value mapping, supporting category legends and continuous legends (color bands).

Type	Purpose
Category Legend	Color mapping description of discrete categorical data
Continuous Legend	Color/size mapping description of continuous values (color band)

Detailed Documentation: Legend Configuration | Category Legend | Continuous Legend

10.3 Tooltip / Tooltip

Tooltip shows data details on hover, supporting custom templates and formatting.

Detailed Documentation: Tooltip Configuration

10.4 Other Components / Others

Component	Purpose
Title	Chart title
Label	Data label
Scrollbar	Data scroll browsing
Slider	Data range selection
Annotation	Data annotation and auxiliary lines

Detailed Documentation: Title | Label | Scrollbar | Slider | Annotation

11. Scales / Scales

Scales map data values to visual channels, such as position, color, size, etc.

11.1 ⚠️ Default Behavior (Do not over-specify type)

G2 automatically infers scale type based on data type, do not manually specify type unless necessary:

Data Type	Automatically Inferred Scale	Example
Numeric Field	`linear`	`{ value: 100 }` → linear
Categorical Field	`band`	`{ category: 'A' }` → band
Date Object	`time`	`{ date: new Date() }` → time

javascript

// ❌ Wrong: unnecessary type specification, may cause rendering exceptions
chart.options({
  scale: {
    x: { type: 'linear' },  // ❌ Numeric fields are linear by default
    y: { type: 'linear' },  // ❌ No need to specify
  },
});

// ✅ Correct: let G2 infer automatically, only configure domain/range when needed
chart.options({
  scale: {
    y: { domain: [0, 100] },  // ✅ Only configure needed properties
    color: { range: ['#1890ff', '#52c41a'] },
  },
});

Special cases where type needs to be manually specified:

Scenario	type	Description
Logarithmic Scale	`log`	Cross-order-of-magnitude data
Power Scale	`pow`	Non-linear data mapping
Square Root Scale	`sqrt`	Compression of non-negative data
String Date	`time`	When date field is string instead of Date object
Custom Mapping	`ordinal`	Discrete to discrete mapping
Gradient Color	`sequential`	Continuous value to color gradient
Threshold Mapping	`threshold`	Segment mapping to color by threshold
Equal Quantization	`quantize` / `quantile`	Discretization of continuous data

11.2 Scale Types

Scale	Type	Purpose
Linear	`linear`	Continuous numeric mapping (default)
Band	`band`	Discrete categorical mapping (default)
Point	`point`	Discrete point position mapping
Time	`time`	Time data mapping
Log	`log`	Logarithmic scale
Power / Square Root	`pow` / `sqrt`	Power function/square root mapping
Ordinal	`ordinal`	Discrete to discrete mapping
Sequential	`sequential`	Continuous value to color gradient
Quantile / Quantize	`quantile` / `quantize`	Discretization mapping of continuous data
Threshold	`threshold`	Segment mapping by threshold

Detailed Documentation: linear | band | point | time | log | pow/sqrt | ordinal | sequential | quantile/quantize | threshold

12. Coordinates / Coordinates

Coordinate systems define the mapping from data to canvas positions, different coordinate systems produce different chart forms.

Coordinate System	Type	Purpose
Cartesian	`cartesian`	Rectangular coordinate system (default)
Polar	`polar`	Radar chart, rose chart
Theta	`theta`	Pie chart, donut chart
Radial	`radial`	Radial coordinate system, radial bar chart
Transpose	`transpose`	X/Y axis swap
Parallel	`parallel`	Parallel coordinate system
Helix	`helix`	Helix coordinate system
Fisheye	`fisheye`	Local magnification effect

Detailed Documentation: cartesian | polar | theta | radial | transpose | parallel | helix | fisheye

13. View Compositions / View Compositions

View compositions are used to create multi-chart layouts, such as facets, multi-view overlays, etc.

Composition	Type	Purpose
Basic View	`view`	Single view container, combining multiple marks
Facet Rect	`facetRect`	Split into rectangular grid multi-charts by dimension
Facet Circle	`facetCircle`	Split into circular multi-charts by dimension
Repeat Matrix	`repeatMatrix`	Multi-variable combination matrix chart
Space Layer	`spaceLayer`	Multi-layer overlay
Space Flex	`spaceFlex`	Flexible layout
Timing Keyframe	`timingKeyframe`	Animation sequence
Geo View	`geoView`	Geographic coordinate system view
Map	`geoPath`	Geographic path drawing

Detailed Documentation: view | facetRect | facetCircle | repeatMatrix | spaceLayer | spaceFlex | timingKeyframe | geoView | Map

14. Themes / Themes

Themes define the overall visual style of charts, including colors, fonts, spacing, etc.

Detailed Documentation: Built-in Themes | Custom Themes

15. Palettes / Palettes

Palettes define color sequences for color mapping of categorical or continuous data.

Detailed Documentation: category10 | category20

16. Animations / Animations

Animations enhance the expressiveness of charts, supporting entry, update, and exit animation configurations.

⚠️ Important Rule: G2 has built-in default animation effects at the bottom level, do not add

animate

configuration when users do not explicitly request animation. Only add the corresponding animate configuration when users clearly describe animation requirements (such as "fade-in animation", "wave entry", etc.) by referring to the documentation.

Detailed Documentation: Animation Introduction | Animation Types | Keyframe Animation

17. Label Transforms / Label Transforms

Label transforms are used to handle label overlap, overflow, etc., improving label readability.

Transform	Type	Purpose
Overflow Hide	`overflowHide`	Hide labels that exceed the area
Overlap Hide	`overlapHide`	Automatically hide overlapping labels
Overlap Dodge Y	`overlapDodgeY`	Y direction offset for overlapping labels
Contrast Reverse	`contrastReverse`	Automatically reverse label color to ensure contrast
Exceed Adjust	`exceedAdjust`	Adjust label position when exceeding canvas boundary
Overflow Stroke	`overflowStroke`	Add stroke mark for overflow area

Detailed Documentation: overflowHide | overlapHide | overlapDodgeY | contrastReverse | exceedAdjust | overflowStroke

18. Patterns / Patterns

Patterns are best practices for common scenarios, including migration guides, performance optimization, responsive adaptation, etc.

18.1 Migration Guide / Migration (v4 → v5)

v4 (Deprecated)	v5 (Correct)
`chart.source(data)`	`chart.options({ data })`
`.position('x*y')`	`encode: { x: 'x', y: 'y' }`
`.color('field')`	`encode: { color: 'field' }`
`.adjust('stack')`	`transform: [{ type: 'stackY' }]`
`.adjust('dodge')`	`transform: [{ type: 'dodgeX' }]`
`label: {}`	`labels: [{}]`

Detailed Documentation: v4 → v5 Migration

18.2 Performance Optimization / Performance

Data pre-aggregation, LTTB downsampling, Canvas renderer confirmation, throttling updates for high-frequency real-time data.

Scenario	Data Volume	Recommended Solution
Line Chart	< 1,000 points	Direct rendering
Line Chart	1,000 ~ 10,000 points	Downsample to less than 500 points
Line Chart	> 10,000 points	Backend aggregation + time range filtering
Scatter Plot	< 5,000 points	Direct rendering
Scatter Plot	5,000 ~ 50,000 points	Canvas rendering + downsampling

Detailed Documentation: Performance Optimization

18.3 Responsive Adaptation / Responsive

autoFit adaptation, ResizeObserver dynamic adjustment, mobile font/margin adaptation.

Detailed Documentation: Responsive Adaptation

antv-g2-chart

NPX Install

Tags

SKILL.md Content (Chinese)

G2 v5 Chart Code Generator

1. Core Constraints / Core Constraints (MUST follow)

1.1 Forbidden Patterns / Forbidden Patterns

Correct V5 Alternative for createView

1.2 Forbidden Hallucinated Mark Types

2. Common Mistakes / Common Mistakes

3. Basic Structure / Basic Structure

4. Core Concepts / Core Concepts

4.1 Chart Initialization

4.2 Encode Channel System

4.3 View Composition (view + children)

5. Concept Guides / Concept Guides

5.1 Chart Selection

5.2 Visual Channels

5.3 Color Theory

6. Chart Types / Chart Types

6.1 Interval Series / Interval

6.2 Line Series / Line

6.3 Area Series / Area

6.4 Pie/Donut Chart / Arc (Pie/Donut)

6.5 Scatter/Bubble Chart / Point

6.6 Histogram / Histogram

6.7 Rose/Radial Bar Chart / Polar Charts

6.8 Statistical Distribution Charts / Distribution

6.9 Relationship Charts / Relation

6.10 Project Management Charts / Project

6.11 Financial Charts / Finance

6.12 Multivariate Data Charts / Multivariate

6.13 Comparison Charts / Comparison

6.14 Basic Marks / Basic Marks

6.15 Range Marks / Range

6.16 Distribution & Pack Charts / Distribution & Pack

6.17 Hierarchy Charts / Hierarchy

6.18 Other Charts / Others

7. Data Transforms / Data Transforms

7.1 Data Transform Types (configured in data.transform)

7.2 Data Format and Patterns

7.3 Common Mistake: Wrong Placement of Data Transform

7.4 Combination Example: Wide Table Data + Stacked Chart

8. Mark Transforms / Mark Transforms

8.1 Anti-overlap Transforms / Anti-overlap

8.2 Aggregation Transforms / Aggregation

8.3 Sorting Transforms / Sorting

8.4 Selection Transforms / Selection

8.5 Other Transforms / Others

9. Interactions / Interactions

9.1 Selection Interactions / Selection

9.2 Highlight Interactions / Highlight

9.3 Filter Interactions / Filter

9.4 Other Interactions / Others

10. Components / Components

10.1 Axis / Axis

10.2 Legend / Legend

10.3 Tooltip / Tooltip

10.4 Other Components / Others

11. Scales / Scales

11.1 ⚠️ Default Behavior (Do not over-specify type)

11.2 Scale Types

12. Coordinates / Coordinates

13. View Compositions / View Compositions

14. Themes / Themes

15. Palettes / Palettes

16. Animations / Animations

17. Label Transforms / Label Transforms

18. Patterns / Patterns

18.1 Migration Guide / Migration (v4 → v5)

18.2 Performance Optimization / Performance

18.3 Responsive Adaptation / Responsive

Correct V5 Alternative for
`createView`

7.1 Data Transform Types (configured in
`data.transform`
)