How to generate svg pie charts from excel for embedding in html emails
- Step 1Build a category breakdown in Excel — One column of categories (
Product,Channel,Region) and one numeric column for the share (Revenue,Spend,Count). Pie charts work best with a handful of categories — keep it to the top 5–8 plus an 'Other' row. - Step 2Upload the file and choose Pie — Drop the
.xlsx/.csvonto the tool (Pro tier, runs in-browser) and set the Chart type dropdown to Pie chart. - Step 3Set Label column and Value column — Type the category header into Label column and the numeric header into Value column. If left blank, auto-detect uses the first column as label and the first all-numeric column as value.
- Step 4Copy the SVG source — The result panel shows the SVG markup (text output — not a rendered picture, and only the first 4000 chars inline). Click Copy to grab the full
<svg>element. - Step 5Paste into the email HTML inside a table cell — Drop the
<svg>element into a<td>in your HTML email template. Table-based layout is the most compatible container for inline SVG across clients that support it. - Step 6Test and add a fallback — Send a test to Gmail, Apple Mail, and your Outlook targets. For clients that strip inline SVG, supply a hosted PNG fallback (or text figures) so no recipient sees a blank cell.
Pie-chart render facts
How the pie layout is drawn. None of these are configurable in the UI.
| Aspect | Behaviour | Note |
|---|---|---|
| Slice sizing | By abs(value) ÷ sum of abs(values) | Negative values are charted by magnitude — see edge cases. |
| Slice direction | Starts at 12 o'clock, sweeps clockwise | First data row is the top-right slice. |
| Percentage labels | Rounded integer %, shown only for slices ≥ 5% | Slices under 5% are drawn but unlabelled to avoid overlap. |
| Legend | 3-column grid beneath the circle, one swatch + label per slice | Legend labels truncate to 9 chars + ellipsis when longer than 10. |
| Colours | 8-colour palette cycling by slice index | #34d399 · #60a5fa · #f472b6 · #fbbf24 · #a78bfa · #fb923c · #38bdf8 · #4ade80. |
| Rows charted | First 20 (empty-label rows dropped) | Keep pies to a few slices; 20 is the absolute cap, not a recommendation. |
Inline SVG support in email clients
Indicative support for inline <svg> in HTML email. Support changes over time and varies by build — always test and provide a fallback.
| Client | Inline SVG | Recommended approach |
|---|---|---|
| Apple Mail (macOS / iOS) | Generally renders | Inline SVG usually works; still test. |
| Gmail (web / app) | Often strips inline SVG | Provide a hosted PNG/CID fallback. |
| Outlook (Windows, Word engine) | No reliable inline SVG | Use a fallback image; don't rely on the SVG. |
| Outlook.com / new Outlook | Inconsistent | Test the specific build; keep a fallback. |
| Thunderbird | Generally renders | Inline SVG typically works. |
| Generic webmail | Varies | Assume it may strip; always have a fallback. |
Tier limits (excel family)
SVG Data Viz requires Pro tier or higher; Free is reference only.
| Tier | Max file size | Max rows | Files per run |
|---|---|---|---|
| Free | 5 MB | 10,000 | 1 (tool not available on Free) |
| Pro | 50 MB | 100,000 | 5 |
| Pro-media | 200 MB | 500,000 | 20 |
| Developer | 500 MB | unlimited | unlimited |
Cookbook
Category-breakdown scenarios for reporting emails. SVG snippets show the slice/legend structure rather than full markup.
Revenue-by-product pie
The standard reporting-email case. Four products, percentages computed from the totals, legend underneath.
Input (q3.xlsx, sheet 1): Product,Revenue Pro,42000 Team,28000 Enterprise,19000 Starter,6000 Config: pie, label=Product, value=Revenue → slices 44% / 30% / 20% / 6% (each ≥5% so all labelled) → 3-column legend: Pro, Team, Enterprise, Starter
A tiny slice loses its label
Slices under 5% are still drawn but not labelled inline, so the legend carries them. Roll small categories into 'Other' if you want every share visible on the pie.
Input: Channel,Spend Search,5200 Social,3100 Email,180 ← ~2% of total Result: Search and Social get % labels; Email's slice is drawn but unlabelled (under 5%). It still appears in the legend with its colour swatch.
Paste into a table-cell email layout
Inline SVG is most compatible inside a table cell. Wrap the copied <svg> in a <td> and keep a fallback row.
<table role="presentation" width="100%">
<tr><td align="center">
<svg xmlns="http://www.w3.org/2000/svg" width="480"
height="300" viewBox="0 0 640 400" ...> ... </svg>
</td></tr>
<!-- fallback row for clients that strip SVG -->
<tr><td align="center">
<img src="https://host/chart.png" width="480" alt="...">
</td></tr>
</table>Scale the pie down for mobile
640×400 is wide for an email column. Keep the viewBox and set smaller width/height attributes so it scales without re-rendering.
Generated: width="640" height="400" viewBox="0 0 640 400"
Edit for email:
<svg ... width="480" height="300"
viewBox="0 0 640 400"> ... </svg>
Proportional scale; everything inside stays aligned.Long category names in the legend
Legend labels truncate at 10 characters. Shorten category names in the sheet if the full text must show in the legend.
Input: Department,Budget Professional Services,40000 Customer Support,25000 Legend renders: "Professio…" "Customer …" Fix: rename to "Pro Svc" / "Support" in Excel first.
Edge cases and what actually happens
Gmail / Outlook strips the inline SVG
Client-dependentInline SVG support is uneven — Gmail often removes it and most desktop Outlook builds don't render it. The cell appears blank with no fallback. Always include a hosted PNG (or text figures) fallback row for these clients.
Free tier upload
Rejected (Pro required)The tool throws SVG Data Viz requires Pro tier. on Free. Upgrade to Pro or higher to generate the pie.
A slice under 5% has no percentage label
By designOnly slices ≥ 5% get an inline % label, to prevent overlapping text on thin wedges. Small categories still render and still appear in the legend. Combine tiny categories into 'Other' if every share must be labelled on the pie.
Negative values in the data
Charted by magnitudeSlice size uses abs(value), so a -500 contributes the same wedge as +500. A pie of net figures with negatives will be misleading. Use positive shares only — pies represent parts of a whole, not signed deltas.
Too many categories
Cluttered (cap 20)The tool charts up to 20 slices, but a readable pie has at most ~6–8. Beyond that, slices and the legend become unreadable. Pre-aggregate to the top categories plus 'Other' in Excel.
Value column is non-numeric
Empty or zero pieCells are parsed with parseFloat; text cells become 0. If no numeric values exist the tool returns <!-- No numeric data found -->. Ensure the value column holds bare numbers.
Special characters in category names
Escaped (preserved)Legend labels and the title are HTML-escaped (&, <, >, "), so R&D and <beta> stay valid in the SVG and in the email HTML.
All values zero
DegenerateThe total is floored at 1 (|| 1), so a zero-sum dataset produces a single full slice or empty wedges rather than a divide-by-zero. Provide at least one positive value for a meaningful pie.
Dark background looks out of place in a light email
Fixed backgroundThe pie sits on a fixed #0f1117 background. In a light-themed email it shows as a dark panel. Edit the background: style in the copied SVG if you need it to blend with a light template.
Data on a non-first sheet
Not chartedOnly the first worksheet is read. Move the breakdown to the first tab before uploading.
Frequently asked questions
Do all email clients show inline SVG?
No — support is uneven. Apple Mail and Thunderbird generally render inline SVG, but Gmail often strips it and most desktop Outlook builds don't render it at all. Always test your targets and include a hosted PNG (or text) fallback so no recipient sees a blank cell.
Why isn't there a percentage on one of my slices?
Slices smaller than 5% are drawn but not labelled inline, to avoid overlapping text on thin wedges. The category still appears in the legend with its colour. Combine small categories into 'Other' if you want every share labelled on the pie.
What's the recommended size for an email pie?
The SVG is generated at 640 × 400. For an email column, scale it down by setting smaller width/height while keeping viewBox="0 0 640 400" — for example width="480" height="300". It scales proportionally.
Does the tool host the chart image for me?
No — and that's the advantage. The chart is generated as inline SVG markup that you paste into the email body, so there's nothing to host. For clients that strip SVG, you supply your own PNG fallback.
How does it handle negative numbers?
Slice size is based on the absolute value, so a negative contributes the same-size wedge as the equivalent positive. Pies aren't suited to signed data — use positive shares of a whole.
How many categories can a pie show?
Up to 20 rows are charted, but a readable pie has roughly 6–8 slices. Aggregate the long tail into an 'Other' row in Excel for a clean chart.
Where should I paste the SVG in my email template?
Inside a table cell (<td>). Table-based layouts are the most compatible container for inline SVG across the clients that support it. Center it with align="center" on the cell.
Can I change the slice colours to match my brand?
Not in the tool — slices use a fixed 8-colour palette cycling by index. Edit the fill="#..." attributes in the copied SVG to apply brand colours before pasting into the template.
Is the chart static or interactive?
Static. Email clients strip scripts anyway, so interactivity wouldn't survive. The percentages and legend are baked into the markup.
Does my revenue data get uploaded?
No. Parsing and SVG generation run entirely in your browser via SheetJS; nothing is sent to a server.
What does the Download button save for a pie?
A file named chart-pie.svg. You can attach it, host it as a fallback image, or open it in a browser to preview before pasting the inline version.
I need to scrub customer data before charting — where?
Sanitize PII first with the email & phone scrubber (the Excel PII redactor routes there), then chart the cleaned breakdown. To summarise raw rows into category totals before the pie, use the Pivot Table Generator.
Privacy first
Every JAD Excel tool runs entirely in your browser using SheetJS and ExcelJS. Your spreadsheets, formulas, and data never leave your device — verified by zero outbound network requests during processing.