Generate visualizations

AVA uses GPT-Vis, AntV's AI-native visualization library, to render charts. GPT-Vis accepts a declarative, Markdown-like syntax that describes chart types, data, and presentation.

AVA handles chart recommendation and syntax generation; GPT-Vis renders the resulting visualization.

Visualize an answer

const result = await ava.analyze('Show revenue by region as a bar chart');
const chart = await ava.visualize(result);
if (chart) {
  console.log(chart.chartType, chart.syntax, chart.html);
}

visualize() first recommends a chart specification, then renders it to HTML. It accepts an object with query and data; you can also supply your own rows without loading a source.

Bring your own data

const chart = await ava.visualize({
  query: 'Show revenue by region as a column chart',
  data: [
    { region: 'East', revenue: 120 },
    { region: 'West', revenue: 90 },
  ],
});

Return values

A successful response contains:

The generated HTML loads GPT-Vis from a CDN and calls its renderer. Viewing that HTML requires access to the CDN.

The result is null for empty data or when no chart is recommended. Chart generation errors reject the call instead of being converted to null.

Understanding GPT-Vis syntax

For example, a column chart specification can look like this:

vis column
data
  - category East
    value 120
  - category West
    value 90

The first line selects the chart type; the indented data block supplies its values. AVA returns this text in syntax. To embed it in your own interface, pass it to a GPT-Vis instance with gptVis.render(chart.syntax).

• GPT-Vis documentation — syntax, rendering API, themes, and application integration.
• GPT-Vis repository — source code, releases, and issue tracking.

Separate recommendation and rendering

Store a chart specification or control when HTML is produced by calling the two steps separately.

Recommend

const spec = await ava.recommend({
  query: 'Plot sales by month',
  data: [{ month: 'January', sales: 120 }],
});

recommend({ query, data }) returns { chartType, syntax } or null. It checks for usable data, recommends a chart type, and generates GPT-Vis syntax with the model. It does not require a loaded source.

Render

if (spec) {
  const html = await ava.viz(spec);
  console.log(html);
}

viz(spec: ChartSpec): Promise<string> wraps the syntax in HTML without an LLM call. The generated document loads the GPT-Vis runtime from a CDN.

Supported chart types

A chart's suitability depends on its data requirements and the user's question. The recommendation module supplies these definitions to the model.

See recommend parameters and viz parameters for all fields and chart types.