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.