AntV G2 Chartby antvis

AntV G2 Chart Skill.

Use the G2 v5 grammar deliberately instead of mixing syntax from other chart libraries.

Data Visualization
Charts
JavaScript

Source Review · AntV G2 ChartSKILL.md

Task Data Visualization Produces • A complete G2 v5 chart specification with container and render setup. • Corrected mark, encoding, transform, and composition choices. • A chart-specific review of labels, color semantics, tooltips, and data meaning. Before You Start Requires @antv/g2 v5 or the documented browser bundle. Optional reference retrieval uses the external AntV context service.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Write Charts in G2 v5 Spec Mode

A G2 v5 implementation guide combining declarative spec rules, targeted reference retrieval, common error prevention, and data-aware visual choices.

Source-based workflowNot an execution benchmark

The Working Approach

AntV G2 Chart focuses on chart implementation with @antv/g2 v5. It starts generated examples from a complete declarative specification and covers common failure points such as missing containers, incorrect mark names, singular label properties, and misplaced transforms. It also provides a documentation-retrieval endpoint for targeted G2 concepts and examples.

The source is especially clear about multi-mark composition: a line and points belong inside a view's children rather than repeated root-type changes. Its visual guidance separates the engine's defaults from the Skill's chosen overrides, and asks that units, source labels, and titles only be added when their meaning is known. It is not a general AntV tool for graphs, diagram editors, or pivot tables.

Expected Deliverables

A complete G2 v5 chart specification with container and render setup.
Corrected mark, encoding, transform, and composition choices.
A chart-specific review of labels, color semantics, tooltips, and data meaning.

See the Example Brief

From Brief to Review

01
Read the Data and Intent
Identify fields, units, comparison needs, and the chart question without inventing missing semantics.
02
Retrieve the Relevant Reference
Use the documented G2 retrieval service when API or chart-type details need confirmation.
03
Build a Complete Spec
Choose valid marks and channels, use transform arrays, and compose overlays within a view.
04
Render and Review
Check actual marks, labels, legends, themes, and dense-data behavior in the target container.

02 When to Use It

When to Use It

Requires @antv/g2 v5 or the documented browser bundle. Optional reference retrieval uses the external AntV context service.

A Good Fit

G2 v5 ImplementationUseful for creating charts with the library's declarative specification style.
Migration and DebuggingHelps identify syntax copied from older G2 usage or other visualization grammars.
Multi-Mark ChartsClarifies how independent overlays should be composed.

Limits to Check

Not Every AntV LibraryG6 networks, X6 diagrams, and S2 pivot tables are outside the stated scope.
Rendering Is Not Data ValidationCorrect rendering does not establish that the data, aggregation, or interpretation is valid.
References Need Network AccessThe documented retrieval endpoint is an external service whose availability must be checked when used.

Bring These Inputs

Dataset and Field MeaningsProvide actual values, types, units, and any permitted aggregation.
Visualization QuestionExplain what the chart should compare or reveal.
Runtime ContextState G2 version, container, theme, and interaction requirements.

03 Decisions That Matter

Decisions That Matter

Complete Initial Specifications
A full spec makes a generated chart easier to reason about than a sequence of partial root changes.
Semantic Color
Color should encode a meaningful group or status, not add a rainbow to a single-series comparison.
Defaults and Overrides Are Distinct
The source distinguishes chosen radius, width, and opacity values from the engine behavior they override.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Install the Skill from the repository's supported route and add @antv/g2 to the target application as appropriate. The chart package and the agent Skill are separate dependencies.

Upstream Source File

https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-g2-chart/SKILL.md

Requires @antv/g2 v5 or the documented browser bundle. Optional reference retrieval uses the external AntV context service.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use antv-g2-chart to build a G2 v5 chart from the supplied monthly revenue data. Overlay a line and points with view plus children, preserve the supplied currency units, and use a complete initial spec with an explicit container and render call. Avoid redundant color legends and check dense labels before adding them.

Inspect the Result

Check the actual output against these observable criteria.

The chart has an explicit container and render call.
Overlay marks are composed as independent children of a view.
Labels, units, and color encodings match the supplied data meaning.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: antvis
Repository: antvis/chart-visualization-skills
Skill File: skills/antv-g2-chart/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · a105fa12a9fa

Editorial Source Summary

A G2 v5 implementation guide combining declarative spec rules, targeted reference retrieval, common error prevention, and data-aware visual choices.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Can I overlay marks by changing the root type twice?

The source says no: that updates the root mark rather than creating independent overlays. Use a view with children.

Does it cover G6 network diagrams?

No. The source explicitly excludes G6, X6, and S2 tasks from this G2 chart Skill.

Are the suggested styling values G2 engine defaults?

Not all of them. The source distinguishes its recommended explicit overrides from the engine's own defaults.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills