Note: In Markdown mode, the content area must include the first line vis <type>, consistent with the plain Syntax mode format.

Code Mode

Generate complete runnable code based on the target framework.

Installation

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>

After loading via CDN, access the main class through GPTVis.GPTVis.

Complete HTML Example

<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 Annual Trend
`);
    </script>
  </body>
</html>

Chart Type Configurations

Common Configuration

All charts include the following fields, which are omitted from the individual chart type definitions below. Each section heading is the type value (e.g. line, column), corresponding to the type column in the chart type table above.

{ 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 is only supported by area.

column / bar

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

pie

Values must not be percentage numbers.

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

Set innerRadius to 0.6 to turn it into a donut chart.

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

Multiple data points are required for the same category to show distribution.

{ 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: whether to align the scales of all dimensions. Defaults to false (each axis scales independently); when true, all axes share the same maximum value, suitable for comparing absolute values across multiple series.

funnel

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

waterfall

Values can be negative to indicate decrease. palette is a color array in the order [positive color, negative color, total color].

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

liquid

percent ranges from 0 to 1.

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

word-cloud

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

venn

Intersections use commas to separate set identifiers: sets: "A,B". label is used to display the name of the corresponding set on the chart.

{ 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 reference node name values.

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 defaults to 'H'; indented-tree defaults to 'LR'.

fishbone-diagram

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

texture: 'rough' produces a hand-drawn style.

table

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

summary

summary is completely different from other chart types: it does not use Syntax/JSON configuration, but instead uses T8 syntax (Markdown + semantic annotations).

⚠️ Before generating a summary, you must: first read references/summary.md to get the T8 syntax rules, the complete entity type list, attribute field definitions, generation requirements, and examples, and only then generate the content. Skipping this step will cause syntax errors.

Best Practices

1. Keep pie charts to no more than 5 categories; merge the rest into "Other" or switch to a bar chart
2. Do not use pie charts for trends, and do not use line charts for unordered categories
3. Value fields must be numeric; category fields must be text
4. Distributions of continuous values (e.g. salaries, scores, ages) must use histogram
5. Multi-dimensional field mapping: when there are two categorical dimensions, write the x-axis dimension as time/category and the other as group
6. In Syntax mode, prefer the Syntax format (streaming-friendly)
7. In Code mode, default to the HTML + CDN approach (zero installation); use the npm approach only when the user specifies a framework