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 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.