home / skills / antvis / chart-visualization-skills / chart-visualization

chart-visualization skill

This skill visualizes data by automatically selecting the best chart type and generating a chart image with a complete parameter set.

npx playbooks add skill antvis/chart-visualization-skills --skill chart-visualization

Review the files below or copy the command above to add this skill to your agents.

Files (28)

SKILL.md

3.0 KB

---
name: chart-visualization
description: This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.
dependency:
  nodejs: ">=18.0.0"
---

# Chart Visualization Skill

This skill provides a comprehensive workflow for transforming data into visual charts. It handles chart selection, parameter extraction, and image generation.

## Workflow

To visualize data, follow these steps:

### 1. Intelligent Chart Selection
Analyze the user's data features to determine the most appropriate chart type. Use the following guidelines (and consult `references/` for detailed specs):

- **Time Series**: Use `generate_line_chart` (trends) or `generate_area_chart` (accumulated trends). Use `generate_dual_axes_chart` for two different scales.
- **Comparisons**: Use `generate_bar_chart` (categorical) or `generate_column_chart`. Use `generate_histogram_chart` for frequency distributions.
- **Part-to-Whole**: Use `generate_pie_chart` or `generate_treemap_chart` (hierarchical).
- **Relationships & Flow**: Use `generate_scatter_chart` (correlation), `generate_sankey_chart` (flow), or `generate_venn_chart` (overlap).
- **Maps**: Use `generate_district_map` (regions), `generate_pin_map` (points), or `generate_path_map` (routes).
- **Hierarchies & Trees**: Use `generate_organization_chart` or `generate_mind_map`.
- **Specialized**:
    - `generate_radar_chart`: Multi-dimensional comparison.
    - `generate_funnel_chart`: Process stages.
    - `generate_liquid_chart`: Percentage/Progress.
    - `generate_word_cloud_chart`: Text frequency.
    - `generate_boxplot_chart` or `generate_violin_chart`: Statistical distribution.
    - `generate_network_graph`: Complex node-edge relationships.
    - `generate_fishbone_diagram`: Cause-effect analysis.
    - `generate_flow_diagram`: Process flow.
    - `generate_spreadsheet`: Tabular data or pivot tables for structured data display and cross-tabulation.

### 2. Parameter Extraction
Once a chart type is selected, read the corresponding file in the `references/` directory (e.g., `references/generate_line_chart.md`) to identify the required and optional fields.
Extract the data from the user's input and map it to the expected `args` format.

### 3. Chart Generation
Invoke the `scripts/generate.js` script with a JSON payload.

**Payload Format:**
```json
{
  "tool": "generate_chart_type_name",
  "args": {
    "data": [...],
    "title": "...",
    "theme": "...",
    "style": { ... }
  }
}
```

**Execution Command:**
```bash
node ./scripts/generate.js '<payload_json>'
```

### 4. Result Return
The script will output the URL of the generated chart image.
Return the following to the user:
- The image URL.
- The complete `args` (specification) used for generation.

## Reference Material
Detailed specifications for each chart type are located in the `references/` directory. Consult these files to ensure the `args` passed to the script match the expected schema.

Overview

This skill turns raw data into clear chart images by selecting the best visualization type, extracting the required parameters, and generating an image via a JavaScript script. It supports 26 chart types covering time series, comparisons, part-to-whole, relationships, maps, hierarchies, and specialized visualizations. The skill outputs both the image URL and the exact arguments used for generation so results are reproducible. It is designed for pragmatic, data-driven chart creation with minimal user friction.

How this skill works

The skill analyzes the user's data to pick the most suitable chart from the supported set (for example line, bar, pie, scatter, map, treemap, radar, boxplot, or network). It then reads the specification for that chart type to extract required and optional parameters, maps user data into the expected args schema, and builds a JSON payload. Finally it invokes the generation script with that payload, captures the generated image URL, and returns the image plus the args used.

When to use it

You need a quick, appropriate chart for exploration or presentation from tabular or structured data.
You have time-series data and want trend or accumulated visualizations with the right chart type chosen automatically.
You want reproducible chart generation with the exact arguments returned for debugging or iteration.
You need specialized visualizations like sankey, treemap, map, radar, or network graphs.
You want consistent styling and theming applied programmatically before exporting an image.

Best practices

Provide clean, typed data with clear field names and consistent units to improve automatic mapping.
Indicate the analytical intent (compare, trend, distribution, part-to-whole, relationship) when ambiguous.
Supply optional metadata like title, theme, and style preferences to control aesthetics.
For maps and routes, include explicit coordinate fields and region identifiers.
Validate the returned args before generating again to iterate quickly on layout or chart type.

Example use cases

Generate a line or area chart for monthly revenue to highlight trends and seasonal patterns.
Create a bar chart or histogram to compare product category sales or show frequency distributions.
Produce a treemap or pie chart to visualize market share or budget allocation (part-to-whole).
Render a sankey chart to illustrate user flow through conversion funnels.
Export a scatter plot to explore correlation between two numeric variables and return the args for reproducibility.

FAQ

Which chart does the skill pick for my data?

The skill inspects data shape and analytical intent, then selects the most appropriate chart from its catalog (time series, comparison, part-to-whole, relationship, map, hierarchy, or specialized types). You can also request a specific chart type.

What do I receive after generation?

You receive the URL of the generated chart image and the full args object used to create it, enabling review and repeatable reproduction.