Chart Visualization

Name: Chart Visualization
Author: antvis

antvis/gpt-vis

28 installs
762 repo stars
Updated June 26, 2026
antvis/gpt-vis

chart-visualization is a Claude Code skill that recommends a chart type and generates GPT-Vis syntax, JSON config, or runnable code to visualize data.

About

This skill recommends and generates data-visualization charts using the GPT-Vis library. It picks a chart type from the user's intent and data across 26 chart types, then produces either a syntax/JSON config for GPTVis.render() or complete runnable code. Developers use it to add LLM-generated charts to an app, either as streamed configs or as a ready-to-run HTML/JS snippet.

Recommends a chart type from user intent and data across 26 supported chart types
Two output modes: syntax/JSON config for GPTVis.render(), or full runnable code
Documents the GPTVis API, Syntax DSL, and NPM/CDN install

Chart Visualization by the numbers

28 all-time installs (skills.sh)
Ranked #980 of 1,335 Generative Media skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

At a glance

chart-visualization capabilities & compatibility

Capabilities: data analysis · chart generation · ui design
Use cases: data analysis · frontend
Pricing: Free

From the docs

What chart-visualization says it does

支持两种输出模式：（1）语法模式——生成 Syntax 或 JSON 配置；（2）代码模式——生成完整的运行代码。

SKILL.md

npm install @antv/gpt-vis

SKILL.md

npx skills add https://github.com/antvis/gpt-vis --skill chart-visualization

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/antvis/gpt-vis/chart-visualization.svg)](https://skillselion.com/skills/antvis/gpt-vis/chart-visualization)

Installs	28
repo stars	★ 762
Last updated	June 26, 2026
Repository	antvis/gpt-vis ↗

What it does

Recommend a chart type and generate GPT-Vis syntax, JSON config, or runnable code to visualize the user's data.

Who is it for?

Turning data and intent into a chart config or runnable GPT-Vis rendering code

When should I use this skill?

Asked to recommend or generate a data-visualization chart with GPT-Vis

What you get

A chart type is chosen and rendered as GPT-Vis syntax, JSON, or complete runnable code.

A chart-type recommendation
GPT-Vis syntax or JSON config, or complete runnable code

By the numbers

supports 26 chart types

Files

SKILL.mdMarkdownGitHub ↗

图表可视化技能

步骤

1. 意图识别：根据用户意图和数据特征选择图表类型 2. 确定输出模式：根据上下文选择语法模式或代码模式 3. 生成输出：按所选模式生成内容

支持的图表类型

type 值	适用场景
line	时间序列趋势
area	时间序列趋势+总量
column	分类数据对比
bar	分类对比（标签长）
pie	部分占整体比例
scatter	两变量关系
dual-axes	不同量级数据对比
histogram	连续数值频次分布
boxplot	数据分布与异常值
violin	数据分布密度
radar	多维度对比
funnel	流程转化率
waterfall	累计增减变化
liquid	百分比/进度
word-cloud	词频展示
venn	集合交并关系
treemap	层级数据占比
sankey	流量流向
flow-diagram	流程步骤
mindmap	层级知识梳理
indented-tree	树节点层级/目录
network-graph	实体间关联关系
organization-chart	组织层级
fishbone-diagram	根因分析
table	表格数据展示
summary	内容总结

输出模式

模式一：语法模式（Syntax / JSON）

用于 LLM 应用集成场景，生成图表配置供 GPTVis.render() 消费。支持两种格式：

Syntax 格式：类 Markdown 缩进语法，适合流式输出（LLM 逐 token 生成时可实时渲染）
JSON 格式：标准 JSON 对象，适合结构化 API 调用

两种格式等价，GPTVis.render() 均可直接接受。

模式二：代码模式

用于用户需要可直接运行的完整代码场景。生成包含安装说明和完整代码的输出。

GPTVis API

GPTVis 是库的统一入口类，负责创建、渲染和销毁图表。

构造函数

new GPTVis(options: VisualizationOptions)

VisualizationOptions：

参数	类型	必填	默认值	说明
`container`	`string \	HTMLElement`	是	—
`width`	`number`	否	—	图表宽度（px）
`height`	`number`	否	—	图表高度（px）
`theme`	`'default' \	'light' \	'dark' \	'academy'`
`wrapper`	`boolean`	否	`false`	是否显示外层 UI 容器（含标签页、下载、复制等）
`locale`	`string`	否	`'zh-CN'`	wrapper 内文案语言

方法

`render(config: string | object): void`

渲染图表。接受两种输入：

Syntax 字符串：以 vis [type] 开头的文本，自动解析为配置对象
JSON 配置对象：包含 type 字段的对象
纯文本：不以 vis 开头的字符串会被当作 summary 类型渲染

多次调用 render() 会自动销毁前一个图表再渲染新图表。

`destroy(): void`

销毁当前图表实例，释放资源。

语法模式：JSON 格式

直接输出符合图表 TypeScript 类型的 JSON 对象，GPTVis.render() 可直接消费。

JSON 示例

{
  "type": "column",
  "data": [
    { "category": "A产品", "value": 30, "group": "线上" },
    { "category": "B产品", "value": 50, "group": "线上" }
  ],
  "title": "产品销量对比",
  "axisXTitle": "产品",
  "axisYTitle": "销量（万）",
  "stack": true,
  "theme": "academy",
  "style": {
    "palette": ["#5B8FF9", "#61DDAA"]
  }
}

语法模式：Syntax 格式

类 Markdown 缩进语法，支持流式渲染。第一行必须是 vis [type]。

语法规则

基本属性 — key value，每行一个：

title 年度趋势
theme dark

对象数组 — data 下每项用 - 开头，子字段缩进：

{ data: { time: string; value: number; }[]; }

对应：

data
  - time 2020
    value 100
  - time 2021
    value 120

纯值数组 — 每项用 - 开头：

{ data: number[] }

对应：

data
  - 10
  - 20

含空格的字符串值 — 用引号（单引号或双引号）包裹；不含空格时可省略引号：

categories
  - "North America"
  - '东南 亚'
  - 欧洲

嵌套对象 — 对象名占一行，子属性缩进：

{ style?: { backgroundColor?: string; palette?: string[] } }

对应：

style
  backgroundColor #f0f2f5
  palette
    - #5B8FF9
    - #61DDAA

递归树形 — children 数组用 - 缩进：

type TreeData = { name: string; children?: TreeData[] };
{ data: TreeData; }

对应：

data
  name 根节点
  children
    - name 子节点A
      children
        - name 孙节点
    - name 子节点B

Syntax 完整示例

vis column
data
  - category A产品
    value 30
    group 线上
  - category B产品
    value 50
    group 线上
title 产品销量对比
axisXTitle 产品
axisYTitle 销量（万）
stack true
theme academy
style
  palette
    - #5B8FF9
    - #61DDAA

Markdown 语法

当输出为 Markdown 格式时，使用 GPT-Vis 作为 fenced code block 的语言标记，内容区写入完整的 Syntax 格式：

````markdown

vis line
data
  - time 2020
    value 100

````

格式：

````

<完整的 Syntax 内容，首行 vis <chart-type>>

````

语法规则：

语言标记固定为 GPT-Vis
内容区使用 Syntax 格式规则编写，首行必须包含 `vis <chart-type>`（完整列表见上方支持的图表类型）
代码块会被 Markdown 插件转换为 <code classname='language-gpt-vis'>，由浏览器端渲染

注意：Markdown 模式下，内容区必须写首行 vis <type>，与纯 Syntax 模式格式一致。

代码模式

根据目标框架生成完整可运行代码。

安装方式

NPM：

npm install @antv/gpt-vis

import { GPTVis } from '@antv/gpt-vis';

CDN：

<script src="https://unpkg.com/@antv/gpt-vis/dist/umd/index.min.js"></script>

CDN 引入后通过 GPTVis.GPTVis 访问主类。

HTML 完整示例

<html>
  <head>
    <script src="https://unpkg.com/@antv/gpt-vis/dist/umd/index.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      const gptVis = new GPTVis.GPTVis({
        container: '#container',
        width: 600,
        height: 400,
      });

      gptVis.render(`
vis line
data
  - time 2020
    value 100
  - time 2021
    value 120
title 年度趋势
`);
    </script>
  </body>
</html>

图表类型配置

通用配置

所有图表均包含以下字段，后续各图表类型定义中省略这些字段。各小节标题即为 type 值（如 line、column），对应上方图表类型表中的 type 列。

{ type: string; title?: string; theme?: 'default' | 'light' | 'dark' | 'academy'; style?: { backgroundColor?: string; palette?: string[] } }

line / area

{ data: { time: string | number; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; stack?: boolean; style?: { lineWidth?: number } }

stack 仅 area 支持。

column / bar

{ data: { category: string; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; stack?: boolean; group?: boolean }

pie

value 不可使用百分比数字。

{ data: { category: string; value: number }[]; innerRadius?: number }

innerRadius 设为 0.6 变为环图。

scatter

{ data: { x: number; y: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string }

dual-axes

{ categories: string[]; series: { type: 'line' | 'column'; data: number[]; axisYTitle?: string }[]; axisXTitle?: string; style?: { startAtZero?: boolean } }

histogram

{ data: number[]; binNumber?: number; axisXTitle?: string; axisYTitle?: string }

boxplot / violin

同一 category 需多条数据以展示分布。

{ data: { category: string; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; style?: { startAtZero?: boolean } }

radar

{ data: { name: string; value: number; group?: string }[]; align?: boolean }

align: 是否对齐各维度比例尺，默认 false（各轴独立缩放）；true 时所有轴共享同一最大值，适合多系列绝对数值对比。

funnel

{ data: { category: string; value: number; }[]; }

waterfall

value 可为负数表示减少。palette 为色板数组，顺序为 [正值色, 负值色, 汇总色]。

{ data: { category: string; value: number }[]; axisXTitle?: string; axisYTitle?: string; style?: { palette?: string[] } }

liquid

percent 范围 0~1。

{ percent: number; shape?: 'rect' | 'circle' | 'pin' | 'triangle' }

word-cloud

{ data: { text: string; value: number; }[]; }

venn

交集用逗号分隔集合标识：sets: "A,B"。label 用于显示图表上对应集合的名称

{ data: { sets: string | string[]; value: number; label?: string }[] }

treemap

type TreeNode = { name: string; value: number; children?: TreeNode[] };
{ data: TreeNode[] }

sankey

{ data: { source: string; target: string; value: number }[]; nodeAlign?: 'left' | 'center' | 'right' | 'justify' }

flow-diagram / network-graph

source/target 引用节点的 name。

type GraphData = { nodes: { name: string }[]; edges: { source: string; target: string; name?: string }[] };

// flow-diagram
{ data: GraphData }

// network-graph
{ data: GraphData; layout?: 'force' | 'circular' | 'grid' | 'radial' | 'concentric' | 'dagre' }

mindmap / indented-tree / organization-chart

type TreeData = { name: string; children?: TreeData[] };

// mindmap
{ data: TreeData; direction?: 'H' | 'LR' | 'RL' }

// indented-tree
{ data: TreeData; direction?: 'LR' | 'RL' | 'H' }

// organization-chart
type OrganizationChartData = {
  name: string;
  description?: string;
  children?: OrganizationChartData[];
};

{ data: OrganizationChartData }

mindmap 默认 'H'，indented-tree 默认 'LR'。

fishbone-diagram

type FishboneNode = { name: string; children?: FishboneNode[] };
{ data: FishboneNode; style?: { texture?: 'rough' | 'default' } }

texture: 'rough' 为手绘风格。

table

{ data: Record<string, string | number>[]; }

summary

summary 与其他图表类型完全不同：不使用 Syntax/JSON 配置，而是使用 T8 语法（Markdown + 语义标注）。

⚠️ 生成 summary 前必须：先读取 references/summary.md 获取 T8 语法规则、完整实体类型列表、属性字段定义、生成要求和示例，然后再生成内容。跳过此步骤将导致语法错误。

最佳实践

1. 饼图分类不超过 5 个，超过建议合并为"其它"或改用条形图 2. 不要用饼图展示趋势，不要用折线图展示无序分类 3. 数值字段必须是数字类型，分类字段必须是文本类型 4. 连续数值的分布（如薪资、成绩、年龄）必须用直方图（histogram） 5. 多维数据字段映射：有两个分类维度时，x 轴维度写 time/category，另一个写 group 6. 语法模式优先用 Syntax 格式（流式友好） 7. 代码模式默认生成 HTML + CDN 方案（零安装），用户指定框架时再用 npm 方案

总结摘要(summary)

使用 T8 语法（类 Markdown + 语义标注）直接书写。

语义标注语法

[显示文本](实体类型)
[显示文本](实体类型, key=value)

实体类型

类型	说明	支持属性	示例
`metric_name`	指标名称	—	`[日活跃用户数](metric_name)`
`metric_value`	指标数值，支持格式化和原始数据	`origin`, `unit`	`[¥1,234,567](metric_value, origin=1234567)`
`other_metric_value`	次要/辅助指标值	—	`[平均订单价值](other_metric_value)`
`delta_value`	绝对变化值，带正负评估	`origin`, `assessment`	`[¥180,000](delta_value, origin=180000, assessment="positive")`
`ratio_value`	百分比变化/增长率	`origin`, `assessment`	`[15%](ratio_value, origin=0.15, assessment="positive")`
`contribute_ratio`	部分对整体的贡献占比	`origin`, `assessment`	`[64.8%](contribute_ratio, origin=0.648, assessment="positive")`
`proportion`	部分与整体的比率	`origin`	`[四分之三](proportion, origin=0.75)`
`trend_desc`	趋势的定性描述	`assessment`	`[强劲增长](trend_desc, assessment="positive")`
`dim_value`	维度值（类别、地区、产品等）	—	`[亚太地区](dim_value)`
`time_desc`	时间引用和时间段描述	—	`[2024年Q4](time_desc)`
`rank`	排名位置	`detail`	`[排名第一](rank, detail=[320, 180, 90, 65, 45])`
`difference`	值之间的差距或差异	`detail`	`[1.4亿台的差距](difference, detail=[200, 180, 160, 140])`
`anomaly`	数据中的异常模式或离群值	`detail`	`[异常集中](anomaly, detail=[15, 18, 20, 65, 22])`
`association`	变量之间的相关性或关系	`detail`	`[强相关性](association, detail=[{"x":100,"y":105},{"x":120,"y":128}])`
`distribution`	数据分布	`detail`	`[分布](distribution, detail=[15, 25, 35, 15, 10])`
`seasonality`	周期性/季节性模式	`detail`	`[明显季节性](seasonality, detail={"data":[80, 90, 95, 135], "range":[0, 150]})`

属性字段：origin（原始数值）、assessment（"positive" / "negative" / "equal"）、unit（单位）、detail（用于高级分析实体的数据）

示例一：销售报告

# Q4 销售报告

## 概述

在 [2024年Q4](time_desc)，[总收入](metric_name)达到
[¥520万](metric_value, origin=5200000)，相比Q3增长了
[¥80万](delta_value, origin=800000, assessment="positive")，
增长率为 [18%](ratio_value, origin=0.18, assessment="positive")。
[客单价](other_metric_value)为 [¥328](metric_value, origin=328)。

## 各地区表现

[北美地区](dim_value)以 [¥210万](metric_value, origin=2100000)领先，
占总收入的 [40%](contribute_ratio, origin=0.40, assessment="positive")。
该地区在所有市场中[排名第一](rank, detail=[2100000, 1800000, 1300000])。

[欧洲](dim_value)呈现[强劲势头](trend_desc, assessment="positive")，
[近一半](proportion, origin=0.48)的销售额来自新客户。
与北美的[90万差距](difference, detail=[210, 195, 180, 170])正在逐季缩小。

示例二：数据分析报告

# 用户行为分析报告

## 流量趋势

[2024年](time_desc)，[月活跃用户](metric_name)达到
[1,200万](metric_value, origin=12000000)，同比增长
[22%](ratio_value, origin=0.22, assessment="positive")，整体呈现
[持续上升](trend_desc, assessment="positive")趋势。

## 用户分布

用户年龄[分布](distribution, detail=[5, 15, 35, 30, 15])集中在25-35岁区间。
[一线城市](dim_value)用户呈现[明显季节性](seasonality, detail={"data":[80, 95, 110, 150], "range":[0, 200]})，
每年Q4达到峰值。

## 异常与关联

[华南地区](dim_value)出现[异常流量集中](anomaly, detail=[12, 15, 14, 58, 16])，
需进一步排查。分析发现用户活跃度与推送频次之间存在
[强正相关](association, detail=[{"x":1,"y":20},{"x":3,"y":55},{"x":5,"y":90}])。

最佳实践

⚠️ 禁止以 `vis summary` 开头。 summary 是唯一不使用 vis 前缀的图表类型。

原因：GPTVis.render() 通过检测字符串是否以 vis 开头来决定渲染路径——以 vis 开头走 key-value 解析器，否则走 T8 文本渲染器。summary 的内容是 Markdown + 语义标注，必须走 T8 路径，所以内容必须直接以 `#` 标题或正文开头。

✅ 正确写法（直接以 Markdown 内容开头）：

# Q4 销售报告

[总收入](metric_name)达到 [¥520万](metric_value, origin=5200000)。

❌ 错误写法（加了 vis summary 前缀，会导致渲染失败）：

vis summary
# Q4 销售报告

[总收入](metric_name)达到 [¥520万](metric_value, origin=5200000)。

Related skills

Remotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.451k4.2k

Ai Video GenerationGenerate videos using 40+ AI models including Veo, Seedance, and others via inference.sh442k665

Ai Image GenerationGenerate images using 50+ AI models including FLUX, Gemini, and Replicate via inference.sh441k665

Ai Avatar VideoGenerate videos featuring AI avatars for product demos, tutorials, marketing, or explainers441k665

Remotion RenderRender videos programmatically using React components and Remotion framework441k665

Remotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k665

FAQ

How many chart types are supported?

26, including line, area, column, bar, pie, scatter, radar, sankey, treemap, and mindmap.

What output modes does it have?

Syntax/JSON config for GPTVis.render(), or full runnable code with NPM or CDN install instructions.

Generative Mediaanalytics

About

Chart Visualization by the numbers

chart-visualization capabilities & compatibility

What chart-visualization says it does

Add your badge

What it does

Who is it for?

When should I use this skill?

What you get

By the numbers

Files

图表可视化技能

步骤

支持的图表类型

输出模式

模式一：语法模式（Syntax / JSON）

模式二：代码模式

GPTVis API

构造函数

方法

render(config: string | object): void

destroy(): void

语法模式：JSON 格式

JSON 示例

语法模式：Syntax 格式

语法规则

Syntax 完整示例

Markdown 语法

代码模式

安装方式

HTML 完整示例

图表类型配置

通用配置

line / area

column / bar

pie

scatter

dual-axes

histogram

boxplot / violin

radar

funnel

waterfall

liquid

word-cloud

venn

treemap

sankey

flow-diagram / network-graph

mindmap / indented-tree / organization-chart

fishbone-diagram

table

summary

最佳实践

总结摘要(summary)

语义标注语法

实体类型

最佳实践

Related skills

FAQ

How many chart types are supported?

What output modes does it have?

This week in AI coding

`render(config: string | object): void`

`destroy(): void`