How to generate svg charts from excel for embedding in confluence and notion pages
- Step 1Build a focused summary in Excel — Wiki charts work best with 5–15 key data points — a label column and a numeric column. Keep it tight; the tool charts only the first 20 rows.
- Step 2Upload to SVG Data Viz and pick a chart type — Drop the
.xlsx/.csvonto the tool (Pro tier, runs in-browser). Choose Chart type: Bar for comparisons, Line for trends, Pie for proportions. - Step 3Set or confirm the columns — Type the category header into Label column and the numeric header into Value column, or leave both blank to auto-detect (first column = label, first all-numeric column = value).
- Step 4Download the SVG file — Click Download. The file is named for the chart type —
chart-bar.svg,chart-line.svg, orchart-pie.svg. The result panel shows the source markup, not a picture; open the file in a browser to preview. - Step 5Upload to your platform — Confluence: Insert → Files → upload the SVG, then place it (Image macro to size it). Notion: drag the
.svgonto the page or/image→ Upload. Jira: attach the file to the issue or embed in the description. - Step 6Update by replacing the file — When the data changes, regenerate, download, and replace the attachment. In Confluence, re-upload with the same filename to update existing references.
Per-platform embed steps
How each platform takes an uploaded SVG. The tool's job ends at producing the file; these are the platform-side actions.
| Platform | How to embed the SVG | Notes |
|---|---|---|
| Confluence (Cloud / DC) | Insert → Files and images → upload → place; Image macro to set width | Renders SVG attachments as images; size to fit the column. |
| Notion | Drag the .svg onto the page, or /image → Upload | Renders uploaded SVG as an image block. |
| Jira | Attach to the issue, or embed in the description via the image picker | Travels with the ticket; good for sprint-report fields. |
| Generic wiki / docs site | Upload as an image asset, reference with <img> or platform image syntax | Any platform that renders SVG images works. |
Chart type → filename → best use
The download filename follows the selected chart type.
| Chart type | Download filename | Best for | Colours |
|---|---|---|---|
| Bar | chart-bar.svg | Comparing categories (story points by assignee, bugs by component) | 8-colour palette cycling by bar |
| Line | chart-line.svg | Trends over sprints/time (velocity, burndown-style series) | Single green series + area fill |
| Pie | chart-pie.svg | Proportions (work-type split, time allocation) | 8-colour palette + legend; % labels ≥ 5% |
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
Project-management and wiki scenarios. Snippets show the input summary and the relevant SVG structure.
Story points by assignee (bar) on a Confluence sprint page
A focused summary charted as a bar comparison and uploaded to the sprint retro page. Keep names short so the −30° axis labels stay readable.
Input (sprint-42.xlsx, sheet 1): Assignee,Points Ana,21 Ben,18 Chi,13 Dee,8 Config: bar, label=Assignee, value=Points → chart-bar.svg → Confluence Insert → Files → upload Title in chart: "sprint-42 — Points"
Work-type split (pie) on a Notion page
Proportions of effort as a pie, dragged onto a Notion doc. Slices under 5% won't get an inline label but appear in the legend.
Input: Type,Hours Features,120 Bugs,64 Chores,40 Meetings,18 Config: pie, label=Type, value=Hours → chart-pie.svg → drag onto Notion page (or /image) → slices 49% / 26% / 16% / 7%, all labelled, legend below
Velocity trend (line) attached to a Jira epic
Sprint-over-sprint velocity as a single-series line, attached to the epic. Format the sprint labels as short text so the axis fits.
Input: Sprint,Velocity S39,34 S40,41 S41,38 S42,45 Config: line, label=Sprint, value=Velocity → chart-line.svg → attach to Jira epic Green line + area fill, 4 markers, axis S39…S42
Update a Confluence chart after the data changes
Re-uploading the same filename updates existing references in Confluence, so the embedded chart refreshes without re-inserting it.
1. Edit the source sheet (new sprint added) 2. Regenerate → Download chart-bar.svg 3. Confluence: re-upload with the SAME filename (Insert → Files → it offers to update the attachment) → every page that embeds it now shows the new chart
Dark chart on a light wiki theme
The chart background is a fixed dark colour. On a light Confluence/Notion theme it reads as a dark card; edit the background if you need it to blend.
Default SVG: style="background:#0f1117;..." To match a light wiki theme, open the downloaded file and change: background:#0f1117 → background:#ffffff (and lighten the text fills if needed) before uploading.
Edge cases and what actually happens
Free tier upload
Rejected (Pro required)The tool errors with SVG Data Viz requires Pro tier. on Free. Upgrade to Pro or higher to generate charts for your wiki.
Summary has more than 20 rows
By design (first 20)Only the first 20 rows are charted. For a busy board, pre-aggregate to the top categories or sort so the meaningful 20 are at the top before uploading.
Dark chart background on a light wiki theme
Fixed backgroundThe background is hard-set to #0f1117. On a light Confluence/Notion page it appears as a dark card. Edit the background: style in the downloaded SVG to match a light theme.
Platform sanitizes uploaded SVG
Platform-dependentSome platforms run SVG through a sanitizer on upload (stripping scripts). The generated chart is static and script-free, so it survives sanitization — but if a platform refuses SVG entirely, export a PNG screenshot of the rendered file as a fallback.
Long assignee / component labels
TruncatedAxis labels over 8 characters (bar/line) and legend labels over 10 (pie) are truncated with an ellipsis. Use short names or initials in the sheet for clean labels.
Value column is non-numeric
Charted as 0 / emptyNon-numeric cells parse to 0; if no numeric values exist the tool returns <!-- No numeric data found -->. Ensure the value column holds bare numbers (no pts, h, or % suffixes in the cell).
Data on a non-first sheet of the workbook
Not chartedOnly the first worksheet is read. Move the summary you want charted to the first tab before uploading.
Special characters in labels (`&`, `<`, `>`)
Escaped (preserved)Labels and title are HTML-escaped, so Front-End & API stays valid in the SVG and renders correctly once embedded.
Expecting a rendered preview in the tool
Source shownThe result panel displays SVG source text (first 4000 chars), not a rendered chart — it's a text-output tool. Open the downloaded .svg in a browser to verify before uploading to the wiki.
Re-upload doesn't refresh the embedded chart
Filename / cacheIf you upload under a new filename, existing page references still point at the old attachment. Re-upload with the same filename (Confluence) or replace the image block (Notion) so the embed updates.
Frequently asked questions
Does Confluence render SVG correctly?
Yes — Confluence Cloud and Data Center both render uploaded SVG attachments as images. Insert via Files and images, then use the Image macro to set the width to fit your page layout.
Does Notion support SVG uploads?
Yes — Notion renders SVG files uploaded as image blocks. Drag the .svg directly onto the page or use the /image command and choose Upload.
Can I attach the chart to a Jira issue?
Yes — attach the downloaded .svg to the issue or embed it in the description via the image picker. The chart travels with the ticket, which is handy for sprint-report fields.
Why is a screenshot of my Excel chart worse than this?
A screenshot is a raster image — it pixelates when zoomed or viewed on a high-DPI display, and it's disconnected from the data. An SVG stays crisp at any zoom and you can regenerate and swap it when the numbers change.
Which chart type should I use for which metric?
Bar for comparing categories (story points by assignee), line for trends across sprints/time (velocity), and pie for proportions (work-type split). Switch with the Chart type dropdown; the download filename reflects your choice — chart-bar.svg, chart-line.svg, or chart-pie.svg.
How do I update an embedded chart when the data changes?
Regenerate from the updated sheet, Download the new SVG, and re-upload it with the same filename (Confluence updates existing references) or replace the image block (Notion). The embed refreshes everywhere it appears.
How many data points should a wiki chart have?
Aim for 5–15 for readability; the tool charts at most the first 20 rows. Pre-aggregate or sort so the most important points are at the top of the sheet.
The chart background is dark but our wiki is light — can I change it?
Not in the tool — the background is a fixed #0f1117. Open the downloaded SVG and change the background: value (and lighten text fills if needed) before uploading to a light-themed wiki.
Will the platform strip my SVG for security?
The generated SVG is static and contains no scripts, so it survives the sanitizers most platforms run on upload. If a platform refuses SVG entirely, fall back to a PNG screenshot of the rendered file.
Is there a live preview of the chart in the tool?
No — the result panel shows the SVG source code (first 4000 characters). Open the downloaded .svg in a browser to see it rendered before you attach it to the page.
Does my project data get uploaded to a server?
No. Parsing and SVG generation happen entirely in your browser via SheetJS; the spreadsheet never leaves your machine.
How do I prepare the data before charting?
Summarise raw issue exports into the counts you want with the Pivot Table Generator, and combine data spread across tabs with the Multi-Sheet Joiner. To check column formats first, the Format Inspector reports what's in each column.
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.