# Chart Forge

> Generates professional inline SVG data visualizations — bar charts, donut charts, progress rings, stat cards, comparison tables, and sparklines — from user-supplied data. Output is clean, print-ready SVG embeddable in HTML documents, reports, and one-pagers without external dependencies. Trigger phrases: "chart forge", "make a chart", "generate a bar chart", "create a donut chart", "visualize this data", "add a chart to my report", "SVG chart", "data visualization", "make this visual", "progress ring", "stat card", "inline chart", "embed a chart", "chart from this data", "turn this into a chart". Do NOT use for: code analysis, architecture diagrams, flowcharts or system diagrams (use /plan-directions), data analysis or statistics (use exploratory-data-analysis), writing or editing document prose, generating images via external APIs, or any task that does not involve rendering data as SVG.

- Skill: `gridlock-nyc/chart-forge` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gridlock-nyc/chart-forge`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gridlock-nyc/chart-forge/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: GRIDLOCK-NYC (https://skillmd.com/u/gridlock-nyc)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gridlock-nyc/chart-forge

---


## Important

All output is self-contained inline SVG — no external fonts, no CDN dependencies, no JavaScript.
The SVG must render correctly when pasted directly into an HTML file or viewed standalone in a browser.
Use system-safe fonts only (`-apple-system`, `Helvetica Neue`, `Arial`, `sans-serif`). Limit palette
to 5-6 colors maximum per chart. Never fabricate data — only visualize numbers the user provides.

## Instructions

1. **Identify chart type and data.** Determine what the user wants to visualize. If the chart type
   is not specified, infer the best type from the data shape:
   - Categorical comparisons → horizontal or vertical bar chart
   - Part-of-whole (proportions that sum to 100%) → donut chart
   - Single KPI or completion percentage → progress ring or stat card
   - Two items being compared side-by-side → comparison graphic (split bar or versus card)
   - Time series trend (5+ points) → sparkline or area chart
   If the data is ambiguous or missing, ask for it before proceeding.

2. **Confirm data and labels.** Echo back the data you plan to visualize and ask for confirmation
   if any values seem inconsistent (e.g., percentages that don't sum to 100%, negative values in a
   donut, empty series).

3. **Determine dimensions.** Default canvas sizes:
   - Bar chart: 600 × 380px
   - Donut chart: 400 × 400px
   - Progress ring / stat card: 300 × 300px
   - Comparison graphic: 600 × 280px
   - Sparkline: 300 × 100px
   User may specify a custom size — honor it exactly.

4. **Choose a color palette.** Default palette (accessible, print-safe):
   - Primary: `#3B82F6` (blue)
   - Secondary: `#10B981` (green)
   - Accent: `#F59E0B` (amber)
   - Danger: `#EF4444` (red)
   - Neutral: `#6B7280` (gray)
   - Background: `#F9FAFB` or white
   If the user specifies brand colors, use those instead.

5. **Generate the SVG.** Build the SVG from scratch using only SVG primitives (`rect`, `circle`,
   `path`, `text`, `line`, `polyline`, `g`). Include:
   - A `viewBox` attribute so the chart scales correctly
   - Axis labels and value labels directly on the SVG (no legend box unless >4 series)
   - A chart title at the top if the user provides one
   - Clean whitespace/padding (at least 40px on all sides)
   - Rounded corners (`rx`) on bar chart bars for a modern look
   - Percentage labels inside or adjacent to donut segments

6. **Output the SVG block.** Wrap the SVG in a fenced code block labeled `svg` for easy copying:
   ````svg
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 380" ...>
     ...
   </svg>
   ````
   After the code block, include a one-line description of what was generated and how to embed it:
   "Paste this SVG directly into your HTML. No dependencies required."

7. **Offer variants.** After delivering the primary chart, offer 1-2 quick alternatives:
   - "Want this as a horizontal bar chart instead?"
   - "Want a donut version showing the same data?"
   Do not generate variants unless the user asks.

## Error Handling

- **No data provided:** Ask the user to supply the data values and labels. Do not generate placeholder
  or example data unless explicitly requested.
- **Data does not match chart type** (e.g., non-percentage values for a donut): Warn the user and
  suggest a more appropriate chart type. Offer to normalize if appropriate.
- **Too many data points for the chart type** (>12 bars, >8 donut segments): Warn that the chart
  will be cluttered. Suggest grouping smaller values into an "Other" category or switching to a
  table-plus-sparkline format.
- **Custom colors fail contrast check** (light text on light background or vice versa): Flag the
  contrast issue and substitute a safe default while noting the change.
- **User requests JavaScript or animation:** Explain that the output is static SVG only. CSS
  animations within SVG are acceptable if the user explicitly requests them — but no `<script>` tags.

## Examples

**Example 1 — Bar chart for a report**
User: "Chart forge: monthly revenue. Jan $12k, Feb $18k, Mar $15k, Apr $22k, May $19k, Jun $27k"
Skill generates a 600×380 vertical bar chart with 6 bars, value labels on top of each bar, month
labels on the x-axis, and a y-axis scaled to $30k. Title: "Monthly Revenue".

**Example 2 — Donut chart for a one-pager**
User: "Make a donut chart: Backend 45%, Frontend 30%, Infrastructure 25%"
Skill generates a 400×400 donut chart with three segments in blue/green/amber, percentage labels
on each segment, and a centered total label.

**Example 3 — Stat card / KPI**
User: "Progress ring showing 73% completion for Q2 goal"
Skill generates a 300×300 SVG with a thick ring arc filled to 73%, the percentage displayed large
in the center, and "Q2 Goal" as a subtitle below the number.