/antv-gpt-vis

name: antv-gpt-vis
description: Recommend and generate appropriate data visualization charts using the GPT-Vis library. Supports two output modes — (1) Syntax mode, which generates Syntax or JSON configurations, and (2) Code mode, which generates complete runnable code. Supports 26 chart types.

GPT-Vis Chart Visualization Skill

GPT-Vis is an AI-native visualization library designed for the LLM era. It uses a framework-agnostic architecture, supports 26 chart types, and enables LLMs to easily generate high-quality visualizations through a simple, natural syntax.

Steps

1. **Intent recognition**: Select the chart type based on user intent and data characteristics 2. **Determine output mode**: Choose Syntax mode or Code mode based on context 3. **Generate output**: Produce content in the selected mode

Supported Chart Types

| type value | Use case | | ------------------ | ----------------------------------------- | | line | Time series trends | | area | Time series trends + totals | | column | Categorical data comparison | | bar | Categorical comparison (long labels) | | pie | Part-to-whole proportions | | scatter | Relationship between two variables | | dual-axes | Comparison of data at different scales | | histogram | Frequency distribution of continuous values | | boxplot | Data distribution and outliers | | violin | Data distribution density | | radar | Multi-dimensional comparison | | funnel | Process conversion rates | | waterfall | Cumulative increases and decreases | | liquid | Percentage / progress | | word-cloud | Word frequency display | | venn | Set intersection/union relationships | | treemap | Hierarchical data proportions | | sankey | Flow and direction of quantities | | flow-diagram | Process steps | | mindmap | Hierarchical knowledge organization | | indented-tree | Tree node hierarchy / directories | | network-graph | Relationships between entities | | organization-chart | Organizational hierarchy | | fishbone-diagram | Root cause analysis | | table | Tabular data display | | summary | Content summary |

Output Modes

Mode 1: Syntax Mode (Syntax / JSON)

Used for LLM application integration scenarios. Generates chart configurations consumed by `GPTVis.render()`. Supports two formats:

• **Syntax format**: Markdown-like indentation syntax, suitable for streaming output (renders in real time as the LLM generates tokens)
• **JSON format**: Standard JSON object, suitable for structured API calls

Both formats are equivalent and can be passed directly to `GPTVis.render()`.

Mode 2: Code Mode

Used when the user needs complete runnable code. Generates output including installation instructions and full code.

GPTVis API

`GPTVis` is the unified entry class of the library, responsible for creating, rendering, and destroying charts.

Constructor

new GPTVis(options: VisualizationOptions)

**VisualizationOptions:**

| Parameter | Type | Required | Default | Description | | ----------- | --------------------------------------------- | -------- | --------- | -------------------------------------------------------------- | | `container` | `string \| HTMLElement` | Yes | — | CSS selector or DOM element | | `width` | `number` | No | — | Chart width (px) | | `height` | `number` | No | — | Chart height (px) | | `theme` | `'default' \| 'light' \| 'dark' \| 'academy'` | No | `'light'` | Theme | | `wrapper` | `boolean` | No | `false` | Whether to show the outer UI container (tabs, download, copy) | | `locale` | `string` | No | `'zh-CN'` | Language of the text inside the wrapper |

Methods

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

Renders a chart. Accepts two kinds of input:

• **Syntax string**: Text starting with `vis [type]`, automatically parsed into a configuration object
• **JSON configuration object**: An object containing a `type` field
• **Plain text**: Strings not starting with `vis ` are rendered as the summary type

Calling `render()` multiple times automatically destroys the previous chart before rendering the new one.

`destroy(): void`

Destroys the current chart instance and releases resources.

Syntax Mode: JSON Format

Directly output a JSON object conforming to the chart's TypeScript type; `GPTVis.render()` can consume it directly.

JSON Example

{
  "type": "column",
  "data": [
    { "category": "Product A", "value": 30, "group": "Online" },
    { "category": "Product B", "value": 50, "group": "Online" }
  ],
  "title": "Product Sales Comparison",
  "axisXTitle": "Product",
  "axisYTitle": "Sales (10k)",
  "stack": true,
  "theme": "academy",
  "style": {
    "palette": ["#5B8FF9", "#61DDAA"]
  }
}

Syntax Mode: Syntax Format

Markdown-like indentation syntax that supports streaming rendering. The f