skills.rest
mdnaimul22
mdnaimul22COMMUNITY
Explore all skills by this author →
GitHub

antv-g2-chart

Generate AntV G2 v5 specification-mode chart code with validation constraints.

2|Updated Apr 15, 2026
Search Tags:#data visualization#javascript#chart generation#runnable code#antv g2#spec mode#v5 constraints
One-click install
npx skills add https://github.com/mdnaimul22/human-skills --skill antv-g2-chart-mdnaimul22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: antv-g2-chart
Source: https://github.com/mdnaimul22/human-skills/tree/main/skills/antv-g2-chart-expert
Command: npx skills add https://github.com/mdnaimul22/human-skills --skill antv-g2-chart-mdnaimul22

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes guesswork from generating AntV G2 v5 charts by producing runnable, specification-mode code that follows the library’s strict constraints.

Core Features & Use Cases

  • G2 v5 spec-mode generator: Produces chart.options({ ... }) code with the correct chart structure and channels (encode: { x, y }).
  • Guardrailed chart correctness: Applies hard rules like a single chart.options() call, plural labels, mandatory container, and required transforms such as transform: [{ type: 'stackY' }].
  • Works for common chart intents: Use when the user asks for G2 v5 bar/line/pie/scatter/area charts or any G2-based data visualization in AntV’s ecosystem.

Quick Start

Ask the AI to generate a G2 v5 chart by specifying the chart type (e.g., bar, line, pie, scatter) and the data fields to map to x/y (and any color/styling details), and tell it to output AntV G2 v5 spec-mode code that renders with chart.render().

Frequently Asked Questions about antv-g2-chart

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate runnable AntV G2 v5 chart code for data visualization?▼

To generate AntV G2 v5 chart code, specify the visualization type and map data fields to x/y channels. The output uses spec-mode with a mandatory container, a single chart.options() call, and valid encode mappings for immediate rendering.

What is spec mode in AntV G2 v5 and when should I use it for chart creation?▼

Spec mode in AntV G2 v5 defines charts declaratively using a single chart.options() call with encode mappings. Use it to generate structured visualization code for bar, line, pie, scatter, or area charts while avoiding forbidden V4 misconfiguration patterns.

Why does my AntV G2 v5 chart fail to render without a container?▼

AntV G2 v5 charts fail without a container because it is a mandatory requirement for rendering. Correct spec-mode code must include a container element alongside valid chart.options() configurations and required transforms like stackY.

Can I create pie and donut charts using AntV G2 v5 spec mode?▼

Yes, you can create pie and donut charts in AntV G2 v5 spec mode using theta-based coordinate rules. The generator applies required transforms and valid encode mappings to produce correct visualization code for these specific chart types.

How to fix invalid palette and misconfiguration errors in AntV G2 v5?▼

Fix invalid palette and misconfiguration errors in AntV G2 v5 by applying hard validation rules. Ensure correct spec-mode options use plural labels, required transforms, and avoid forbidden V4 patterns to generate valid chart configurations.

Related Skills

Explore More Software Engineering Skills→
antvisantvis
454

antv-g2-chart

Translate natural-language chart requests into runnable G2 v5 Spec code.

Official
Intermediate
legoutlegout
3

plotly

Generate interactive Plotly visualizations from structured datasets in Python.

Community
Intermediate
patriotnewsactivismpatriotnewsactivism
1

infographic-builder

Convert raw data and text into infographics using AntV Infographic DSL and React.

Community
Intermediate
ErixWongErixWong
17

echarts

Generate interactive ECharts visualizations with Python scripting.

Community
Intermediate