Antv G2 Chart

This generates AntV G2 v5 chart code using the modern Spec API pattern, handling everything from basic bar and line charts to treemaps and force graphs. The skill enforces strict v5 conventions like mandatory container IDs, single `chart.options()` calls, and using `type: 'view'` with children arrays for multi-mark compositions. It's built around a comprehensive constraint system that catches common mistakes like mixing v4 chain syntax, using hallucinated mark types from other libraries, or setting illegal palette names that throw runtime errors. Worth using if you're working with G2 and need clean, runnable code that follows current best practices without the trial and error of API migration.

skills.sh installs: 1.4K
GitHub stars: 530
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add antvis/chart-visualization-skills --skill antv-g2-chart --agent claude-code

Installs into .claude/skills of the current project.

Files

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

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

<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.

SKILL.md on GitHub