
Chart Visualization
Turn tabular or narrative data into AntV chart images (bar, line, pie, sankey, mind-map, and more) via a single API call for reports and product UI.
Overview
Chart Visualization is an agent skill most often used in Build (also Grow) that generates AntV chart images from JSON via the gpt-vis API.
Install
npx skills add https://github.com/antvis/chart-visualization-skills --skill chart-visualizationWhat is this skill?
- 4-step flow: pick chart type → build JSON body → POST AntV API with curl → output Markdown image URL
- Chart selection guide for time series, comparisons, proportions, flows, hierarchies, and specialty types
- 15+ chart families including dual-axes, sankey, radar, funnel, network-graph, fishbone, and flow-diagram
- Requires type plus source: chart-visualization-skills on every API request
- Returns success.resultObj URL rendered as  for agents and docs
- 4-step procedure from data analysis through curl API call to Markdown image output
- 15+ named chart types across comparison, trend, distribution, proportion, and diagram categories
Adoption & trust: 3.1k installs on skills.sh; 337 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have metrics or categories in text or tables but no fast way to produce a correct chart image for a doc, slide, or agent reply.
Who is it for?
Quick static charts from structured data when you want AntV-hosted images without building a chart component first.
Skip if: Highly interactive in-app charting, offline-only workflows without network access, or sensitive data you cannot send to an external visualization API.
When should I use this skill?
User needs bar, line, pie, scatter, radar, sankey, mind-map, flow, or other AntV charts generated as images from data.
What do I get? / Deliverables
You receive a validated API response and a Markdown image link for the chosen AntV chart type ready to drop into messages or pages.
- Markdown image embed using the API resultObj URL
- Chart-type recommendation and request JSON matching AntV conventions
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Charts are usually produced while building dashboards, admin UI, or demo pages—the first canonical shelf is Build frontend even when charts later support growth analytics. frontend covers visualization deliverables (images and markdown embeds) that ship in apps, docs, and landing pages.
Where it fits
Embed a column chart image in a SaaS admin readme after the agent formats trial signup counts as JSON.
Show a simple area chart of projected MRR on a waitlist page without shipping a charting dependency.
Convert weekly retention buckets into a funnel chart for a founder update post.
How it compares
API-backed chart image generator—not a local matplotlib script or a full React chart library integration.
Common Questions / FAQ
Who is chart-visualization for?
Builders and agents who need publication-ready chart images from JSON data using AntV’s hosted API, especially for docs, reports, and lightweight dashboards.
When should I use chart-visualization?
Use in Build when adding visuals to a frontend demo or docs; in Validate when illustrating prototype metrics on a landing page; in Grow when turning analytics exports into shareable charts for stakeholders.
Is chart-visualization safe to install?
It calls an external POST endpoint with your chart data—review the Security Audits panel on this page and avoid sending secrets or PII in request bodies.
SKILL.md
READMESKILL.md - Chart Visualization
请根据用户输入的内容,将数据可视化为图表。 ## 步骤 1. 分析用户数据和需求,选择最合适的图表类型 2. 构造符合规范的 JSON 请求体 3. 使用 curl 工具调用 API 生成图表图片 4. 将返回的图片 URL 以 Markdown 图片格式输出 ## 图表选择指南 根据用户的数据特征和需求,选择最合适的图表类型: - **时间序列**:用 `line`(趋势)或 `area`(累计趋势);两个不同量纲用 `dual-axes` - **比较类**:用 `bar`(横向分类对比)或 `column`(纵向分类对比);频率分布用 `histogram` - **占比类**:用 `pie`(比例构成)或 `treemap`(层级占比) - **关系与流程**:用 `scatter`(相关性)、`sankey`(流向)或 `venn`(集合重叠) - **层级与树形**:用 `organization-chart` 或 `mind-map` - **专用类型**: - `radar`:多维度对比 - `funnel`:流程阶段转化 - `liquid`:百分比/进度 - `word-cloud`:文本词频 - `boxplot` / `violin`:统计分布 - `network-graph`:复杂节点关系 - `fishbone-diagram`:因果分析 - `flow-diagram`:流程图 - `spreadsheet`:结构化数据表或透视表 ## API 接口 POST https://antv-studio.alipay.com/api/gpt-vis 请求体为 JSON,必须包含 `type` 和 `source: "chart-visualization-skills"` 字段。 示例: ```bash curl -X POST https://antv-studio.alipay.com/api/gpt-vis \ -H "Content-Type: application/json" \ -d '{"type":"line","source":"chart-visualization-skills","data":[{"time":"2025-01","value":100}],"title":"示例图表"}' ``` 返回示例: ```json {"success":true,"resultObj":"https://..."} ``` 将 `resultObj` 中的 URL 以 Markdown 图片格式输出:`` ## 支持的图表类型 | 分类 | 图表类型 | |------|---------| | 比较类 | 条形图(bar)、柱状图(column)、瀑布图(waterfall)、双轴图(dual-axes) | | 趋势类 | 面积图(area)、折线图(line)、散点图(scatter) | | 分布类 | 箱线图(boxplot)、直方图(histogram)、小提琴图(violin)、漏斗图(funnel) | | 占比类 | 饼图(pie)、水波图(liquid)、词云(word-cloud) | | 层级类 | 组织架构图(organization-chart)、思维导图(mind-map)、矩形树图(treemap)、桑基图(sankey) | | 关系类 | 关系图(network-graph)、韦恩图(venn) | | 流程类 | 流程图(flow-diagram)、鱼骨图(fishbone-diagram) | | 多维类 | 雷达图(radar) | | 表格类 | 表格/透视表(spreadsheet) | ## 通用可选参数 | 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | theme | string | "default" | 主题:"default" / "academy" / "dark" | | width | number | 600 | 图表宽度 | | height | number | 400 | 图表高度 | | title | string | "" | 图表标题 | | style.texture | string | "default" | 纹理:"default" / "rough"(手绘风格) | 带坐标轴的图表还支持:axisXTitle、axisYTitle。 ## 各图表 data 格式 - **area / line**: `{time: string, value: number, group?: string}[]`,可选 stack: boolean - **bar**: `{category: string, value: number, group?: string}[]`,可选 group / stack (默认 stack: true) - **column**: `{category: string, value: number, group?: string}[]`,可选 group (默认 true) / stack - **scatter**: `{x: number, y: number, group?: string}[]` - **pie**: `{category: string, value: number}[]`,可选 innerRadius: number (0-1) - **radar**: `{name: string, value: number, group?: string}[]` - **funnel**: `{category: string, value: number}[]` - **waterfall**: `{category: string, value?: number, isTotal?: boolean, isIntermediateTotal?: boolean}[]` - **dual-axes**: categories: string[], series: {type: "column"|"line", data: number[], axisYTitle?: string}[] - **histogram**: `number[]`,可选 binNumber: number - **boxplot / violin**: `{category: string, value: number, group?: string}[]` - **liquid**: percent: number (0-1),可选 shape: "circle"|"rect"|"pin"|"triangle" - **word-cloud**: `{text: string, value: number}[]` - **sankey**: `{source: string, target: string, value: number}[]`,可选 nodeAlign - **treemap**: `{name: string, value: number, children?: ...}[]` (最深 3 层) - **venn**: `{sets: string[], value: number, label?: string}[]` - **network-graph / flow-diagram**: `{nodes: {name: string}[], edges: {source: string, target: string, name?: string}[]}` - **fishbone-diagram / mind-map**: `{name: string, children?: ...}` (最深 3 层) - **organization-chart**: `{name: string, description?: string, children?: ...}` (最深 3 层),可选 orient: "horizontal"|"vertical" - **spreadsheet**: `Record<string, string | number>[]`,可选 rows / columns / values(透视表字段)