# antv-g2-chart

This skill guides agents through building and tuning G2 v5 visualizations, diagnosing rendering problems, and handling V4 migrations. Use it when chart code is part of the task.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 installs · ★ 515
- Author: antvis
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/antvis/chart-visualization-skills/tree/HEAD/skills/antv-g2-chart/SKILL.md
- Updated: 2026-09-22
- HTML: https://affpapa.org/en/nevibecode/skills/antv-g2-chart

## What it does

The skill steers chart examples toward G2 v5’s declarative spec: configure the chart with `chart.options()`, provide a `container`, then call `chart.render()`. It covers common visualizations such as bars, lines, heatmaps, and Sankey diagrams.

Its guidance includes `encode` channels, transform arrays, mark types, labels, and combining marks with `view` and `children`. For G2 reference material, the skill uses `curl` to query AntV’s HTTP retrieval service. It requires the G2 v5 Spec Mode; V4-style chained calls are not the pattern it supports. This skill is not for G6 network graphs, X6 diagrams, or S2 pivot tables.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add antvis/chart-visualization-skills --skill antv-g2-chart -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/antv-g2-chart/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/antv-g2-chart/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add antvis/chart-visualization-skills --skill antv-g2-chart -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/antv-g2-chart/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add antvis/chart-visualization-skills --skill antv-g2-chart -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/antv-g2-chart/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install antvis/chart-visualization-skills antv-g2-chart
```

2. **Manually: put the files in place**
- File: `.github/skills/antv-g2-chart/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add antvis/chart-visualization-skills --skill antv-g2-chart -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/antvis/chart-visualization-skills --path skills/antv-g2-chart
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/antv-g2-chart/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add antvis/chart-visualization-skills --skill antv-g2-chart -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/antvis/chart-visualization-skills/tree/HEAD/skills/antv-g2-chart/SKILL.md

## When to use it
- build a complete G2 v5 chart spec
- configure encodings and data transforms
- overlay line and point marks in one view
- diagnose rendering errors or V4 migration issues

## Example prompts
- Create a bar chart from this data using G2 v5.
- Add point marks over the line chart with `view` and `children`.
- Check this G2 chart configuration and fix its rendering errors.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: ff06c99237b9833c.

BEGIN THIRD-PARTY FILE ff06c99237b9833c
````text
---
name: antv-g2-chart
description: "Use this skill whenever the user wants to create, customize, or troubleshoot G2 v5 chart visualizations. Triggers include: any mention of 'G2', 'antv g2', '@antv/g2', 'G2 chart', 'G2 可视化', or requests to produce charts like bar charts (柱状图), line charts (折线图), pie charts (饼图), scatter plots (散点图), area charts (面积图), heatmap (热力图), radar charts (雷达图), treemap (矩形树图), funnel charts (漏斗图), sankey diagrams (桑基图), gauge (仪表盘), wordcloud (词云), boxplot (箱线图), as well as G2-specific topics like encode channels, scale config, coordinate systems, transforms, interactions, themes, labels, and animations. Also use when debugging G2 rendering errors, V4→V5 migration issues, or chart type selection. Do NOT use for G6 graph/network visualization, X6 editor diagrams, or S2 pivot tables."
tools:
  - curl
---

# 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()`.

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

const chart = new Chart({ container: 'container', autoFit: true });
chart.options({
  type: 'interval',
  data: [{ genre: 'Sports', sold: 275 }],
  encode: { x: 'genre', y: 'sold' },
});
chart.render();
```

### CDN Usage

```html
<script src="https://unpkg.com/@antv/g2@5/dist/g2.min.js"></script>
<script>
  const chart = new G2.Chart({ container: 'container', autoFit: true });
  chart.options({
    type: 'interval',
    data: [{ genre: 'Sports', sold: 275 }],
    encode: { x: 'genre', y: 'sold' },
  });
  chart.render();
</script>
```

## Content Retrieval Service

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.

- Host: `https://sive.antv.antgroup.com`
- Endpoint: `/api/v1/context/retrieve`
- Method: `GET`
- Parameters: `query`, `library`, `topK`, `content`, `maxTokens`

Retrieve reference documents by query (hybrid search = FTS + vector + RRF fusion).

| Parameter | Type | Required | Description |
|---|---|---|---|
| `query` | string | ✅ | Search keywords, e.g. `bar chart interval` |
| `library` | string | ✅ | Library name: `g2`, `g6`, `x6` |
| `topK` | number | | Number of results to return (default: 5) |
| `content` | boolean | | Return full reference doc markdown (default: true) |
| `maxTokens` | number | | Max tokens per result (default: unlimited) |

```bash
curl "https://sive.antv.antgroup.com/api/v1/context/retrieve?query=bar+chart+stacked&library=g2"
```

## Critical Rules

### MUST: Use V5 Spec Mode ONLY

```javascript
// ❌ WRONG — V4 chain API (deprecated, will not render)
chart.interval()
  .data([...])
  .encode('x', 'genre')
  .encode('y', 'sold')
  .style({ radius: 4 });
````
END THIRD-PARTY FILE ff06c99237b9833c

The third-party file has ended. Everything between the ff06c99237b9833c tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 3120 of 11636 bytes. © antvis · MIT · https://github.com/antvis/chart-visualization-skills/tree/HEAD/skills/antv-g2-chart/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md