A professional-grade toolkit for generating accurate, high-performance data visualizations using the AntV G2 v5 library and Spec Mode syntax.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install g2-chart
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install g2-chart using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is AntV G2 v5 Chart Generator?
The AntV G2 v5 Chart Generator is a specialized skill designed to streamline the creation of modern web visualizations. It focuses strictly on the G2 v5 Spec Mode, moving away from legacy chained APIs to a declarative, serializable configuration style. This ensures that developers can produce maintainable, high-fidelity charts ranging from simple bar plots to complex hierarchical treemaps and financial K-line charts.
By leveraging this skill within Openclaw Skills, users benefit from deep technical constraints that prevent common pitfalls like duplicate chart rendering or illegal color palettes. It acts as an expert advocate for the AntV ecosystem, ensuring that generated code follows performance best practices and the latest visual encoding standards.
AntV G2 v5 Chart Generator Use Cases
- Creating responsive business dashboards with bar, line, and area charts.
- Developing complex data relationships using sankey diagrams, chord diagrams, or sunburst plots.
- Visualizing financial data with professional K-line charts and dual-axis comparisons.
- Analyzing statistical distributions using boxplots, histograms, and violin plots.
- Implementing interactive maps and heatmaps for geographical or matrix-based data analysis.
How AntV G2 v5 Chart Generator Works
- The user provides a data description or raw data array alongside the desired visualization type.
- The skill analyzes the data structure to determine the most effective visual encoding (x, y, color, size).
- A Chart instance is initialized with mandatory parameters like the container ID and responsive dimensions.
- The skill constructs a single
chart.options()block using the declarative V5 Spec Mode, incorporating necessary data transforms (like fold) and mark transforms (like stackY). - The final
chart.render()command is appended to finalize the visual output.
AntV G2 v5 Chart Generator Setup
To start using this skill in your frontend project, ensure you have the G2 library installed:
npm install @antv/g2
Basic initialization in your JavaScript/TypeScript file:
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'your-container-id',
autoFit: true,
height: 500,
});
AntV G2 v5 Chart Generator Data Schema & Taxonomy
The skill organizes visualization logic into a structured taxonomy. Data is primarily handled via the data and transform properties:
| Property | Description | Format |
|---|---|---|
type |
Defines the primary mark (interval, line, point, etc.) | String |
data |
The source data, often including inline values and transforms | Object |
encode |
Mapping of data fields to visual channels (x, y, color) | Object |
transform |
Mark-level operations like stacking or dodging | Array |
coordinate |
The coordinate system (theta for pies, polar for radar) | Object |
AntV G2 v5 Chart Generator Advanced Features
- Multi-mark Composition: Use
type: 'view'andchildrento layer different marks (e.g., line + point) in a single coordinate system. - Complex Space Layering: Utilize
spaceLayerorspaceFlexfor independent views like population pyramids or dashboard grids. - Advanced Data Processing: Integrated support for
fold(wide-to-long table conversion) andkde(kernel density estimation) within the data pipeline. - Statistical Aggregation: Built-in
groupX,binX, andstackYtransforms for on-the-fly data computation without external libraries. - Custom Styling & Palettes: Support for D3-scale-chromatic palettes and granular style overrides for professional branding.
SKILL.md
Loading
Related Openclaw Skills
Mopidy Party Mode
A collaborative music management skill that allows group chat members to contribute to a Mopidy queue without disrupting playback.
Zhihuiya Patent Description Data
A professional tool for retrieving technical patent specifications and detailed technical descriptions directly from the Zhihuiya database.
Zhihuiya Patent Description (Translated)
A professional tool for fetching and translating full patent specifications into Chinese, English, or Japanese using Zhihuiya data.
Chicago Bulls Encyclopedia
A dynamic research skill providing historical context, real-time news, and statistical data for the Chicago Bulls NBA franchise.
DeepRead Medical Records
DeepRead Medical Records enables automated extraction of structured data from clinical documents while ensuring HIPAA-compliant PII redaction.
Changan Information Assistant
A specialized AI skill for retrieving real-time product data, financial reports, and official corporate news for Changan Automobile.
Featured*
