chart
GitHub将数字数据转换为条形、折线、面积、饼图或环形图的技能。根据意图选择图表类型，输出可渲染的JSON规范及一句话解读，支持趋势、对比和构成分析。
Trigger Scenarios
Install
npx skills add mohitagw15856/pm-claude-skills --skill chart -g -y
SKILL.md
Frontmatter
{
"name": "chart",
"description": "Turn numbers into a chart — bar, line, area, pie, or doughnut. Use when asked to chart or graph data, visualize metrics\/trends\/breakdowns, or show numbers as a picture instead of a table. Produces a ready-to-render chart spec (renders live in the playground and exports as PNG) plus a one-line read of what the chart shows."
}
Chart Skill
A table of numbers hides the story; a chart shows it. This skill turns data into a clean, correctly-typed
chart — a trend as a line, a comparison as bars, a composition as a pie/doughnut — emitted as a
small JSON spec inside a ```chart block that renders live in the playground (and exports as PNG).
Required Inputs
Ask for these only if they aren't already provided:
- The data — the numbers, with their labels/categories (paste a table, list, or metrics).
- What you want to show — a trend over time, a comparison between things, or parts of a whole. This decides the chart type.
- Series — one metric or several (e.g. revenue and churn over the same months).
- Title (optional) — what the chart is about.
If the data implies the wrong chart type for the goal, pick the right type and say why.
Output Format
[What the chart shows]
A one-line read — the takeaway the chart makes obvious.
{
"type": "line",
"title": "MRR vs. churned MRR (2026)",
"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
"series": [
{ "name": "MRR ($k)", "data": [120, 138, 151, 167, 180, 201] },
{ "name": "Churned ($k)", "data": [8, 9, 7, 11, 9, 8] }
]
}
Notes (optional) — caveats, the source of the numbers, or what a follow-up chart would show.
Chart Spec Rules (so it renders)
- Emit a single
```chartblock containing valid JSON (double-quoted keys/strings, no trailing commas, no comments). type:"bar","line","area","pie", or"doughnut".labels: the x-axis categories (or the slice names for pie/doughnut).series: an array of{ "name": "...", "data": [numbers] }. Pie/doughnut uses the first series only.- Every series'
datalength must matchlabelslength. Numbers only — no units inside the array (put units in the series name or title). - Choose the type by intent: trend over time → line/area; compare categories → bar; parts of a whole → pie/doughnut.
Quality Checks
- Chart type matches the intent (trend → line, comparison → bar, composition → pie)
- The JSON is valid and renders without edits (no trailing commas, all strings quoted)
- Every series' data length equals the number of labels
- Units/scale are clear (in the title or series names), and the one-line read states the takeaway
- Multiple series are used only when they share the same axis/scale
Anti-Patterns
- Do not use a pie chart for more than ~6 slices or for trends — pies show composition, not change
- Do not put units or text inside the numeric
dataarray — it breaks the chart - Do not emit invalid JSON (trailing commas, single quotes, comments) — it won't render
- Do not mismatch lengths — a series shorter/longer than the labels misaligns the chart
- Do not chart numbers you weren't given — flag gaps instead of inventing data points
Based On
Data-visualization practice (chart-type-to-intent: trend/comparison/composition), emitted as a renderable chart spec.
Version History
- a38bc30 Current 2026-07-05 11:27
