CSV to Chart

Use when (1) user pastes or uploads CSV data and asks to generate a chart, graph, or visualization. (2) user wants to "plot" or "visualize" tabular data. (3) user provides data and says "make a chart", "show this as a graph", or "visualize this".

Core Position

This skill solves the specific problem of: user has tabular CSV data and needs a visual chart — not the raw numbers.

This skill IS NOT:

• A data transformation tool (use csv-to-task for row-level operations)
• A reporting tool — it produces visual output, not written reports
• Activated by "analyze this data" alone — must involve chart/visualization intent

This skill IS activated ONLY when: chart/graph/visualization intent + CSV data are both present.

Modes

/csv-to-chart

Default mode. Reads CSV data and outputs a chart specification or renders the chart directly.

When to use: User provides CSV and explicitly asks for a chart, plot, graph, or visualization.

/csv-to-chart/suggest

Suggests the most appropriate chart type based on data structure without generating the chart.

When to use: User is unsure which chart type fits their data.

Execution Steps

Step 1 — Parse the CSV

1. Receive CSV input (pasted text, file attachment, or path)
2. Detect header row — first row becomes column names
3. Detect column types:
   • Numeric → candidate for Y-axis / values
   • Date/datetime → candidate for X-axis / time series
   • Text/category → candidate for labels / categories
4. If CSV is malformed (uneven columns, no header), respond with specific fix request

Step 2 — Select Chart Type

Choose the most appropriate chart based on data shape:

If user specified a chart type, validate it makes sense for the data; warn if mismatched.

Step 3 — Generate Chart

Produce chart using a library appropriate to context:

• Python: matplotlib or plotly
• JavaScript: chart.js or plotly.js
• Markdown/mermaid: mermaid flowchart for simple data

Output the complete, runnable code block with the chart. Include axis labels, title, and legend.

Step 4 — Validate Output

• Verify chart renders without error
• Confirm X and Y axes match the data columns
• Ensure no data truncation or misordering

Mandatory Rules

Do not

• Do not assume column meaning from position — always use headers
• Do not强行 apply a pie chart to data with >7 categories
• Do not truncate data rows silently — warn if >500 rows
• Do not embed API keys in chart rendering code

Do

• State the chart type being generated and why it fits the data
• Preserve original column names and data types
• Handle missing values explicitly (skip, zero-fill, or annotate)
• Add a clear title and axis labels

Quality Bar

A good output:

• Chart type matches data shape and user intent
• All columns are correctly mapped to axes
• Code runs without modification and renders a visible chart
• Handles missing values and edge cases explicitly

A bad output:

• Renders a chart type unrelated to data (e.g., pie chart for 50 categories)
• Misplaces data on wrong axis (category on Y, numeric on X)
• Drops or reorders rows silently
• Code block missing dependencies or imports

Good vs. Bad Examples

References

• references/ — Chart type decision tree, code templates for plotly/matplotlib/chart.js