AntV's official skill for G2 v5 charts: spec rules, mark types, encode and transform conventions, and pitfalls.
$ npx skills add https://craftwork.design/skills/antv-g2-chart -a claude-code -y
Installs into .claude/skills/antv-g2-chart. Add -g for every project.
SKILL.md
G2 v5 Chart Visualization
Overview
G2 v5 is AntV's grammar-of-graphics charting library. It uses Spec Mode — a declarative, JSON-like configuration style. Generated examples should start from a complete spec; runtime code may later merge a local update through chart.options().
When using AntV G2 for data visualization, if you need to understand the concepts, usage, API, examples, and other aspects of G2 v5, you can use the provided context retrieval service. When using the skill, content is retrieved via an antv HTTP API server using GET requests.
chart.options() supports incremental deep-merge updates, which is useful for runtime interaction. For generated one-shot code, provide a complete initial spec. To create independent overlay marks, use one type: 'view' with children; sequentially changing the root type does not create an overlay.
// ❌ WRONG — this changes one root mark from line to point; it does not overlay them
chart.options({ type: 'line', data, encode: { x: 'date', y: 'value' } });
chart.options({ type: 'point', data, encode: { x: 'date', y: 'value' } });
// ✅ CORRECT — children array for multi-mark
chart.options({
type: 'view',
data,
children: [
{ type: 'line', encode: { x: 'date', y: 'value' } },
{ type: 'point', encode: { x: 'date', y: 'value' } },
],
});
MUST: container is mandatory, chart.render() at the end
// ❌ WRONG — no container, no render
const chart = new Chart();
chart.options({ type: 'interval', data });
// ✅ CORRECT
const chart = new Chart({ container: 'container', autoFit: true });
chart.options({ type: 'interval', data, encode: { x: 'genre', y: 'sold' } });
chart.render();
MUST: labels is plural; range encodings use mark-appropriate channels
// ❌ WRONG
label: { text: 'sold' }
// ✅ CORRECT
labels: [{ text: 'sold' }]
// Interval / link ranges may use either a two-field array or y + y1.
encode: { y: ['start', 'end'] }
// RangeY explicitly uses y + y1.
encode: { y: 'start', y1: 'end' }
MUST: No d3 in user code
// ❌ WRONG — d3 is not exposed in user scope
const total = d3.sum(data, d => d.value);
// ✅ CORRECT — use native JS or G2 built-in transforms
const total = data.reduce((sum, d) => sum + d.value, 0);
MUST: No white/near-white fill, no padding as array
// ❌ WRONG
style: { fill: '#fff' } // invisible on white background
padding: [40, 30, 40, 50] // invalid in G2 v5
// ✅ CORRECT
encode: { color: 'group' } // let G2 assign colors
padding: 40 // single number or 'auto'
MUST: Transpose is a transform, not a coordinate type
