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:

{
  "tool": "generate_chart_type_name",
  "args": {
    "data": [...],
    "title": "...",
    "theme": "...",
    "style": { ... }
  }
}

Execution Command:

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.

License

This

SKILL.md

is provided by antvis/chart-visualization-skills. Licensed under the MIT License.