How to convert excel data to an inline svg bar chart — no libraries needed
- Step 1Prepare a two-column sheet — Put your categories in one column (e.g.
Region,Product,Test case) and the numbers to chart in another (e.g.Revenue,Count,ms). The tool reads the first sheet only, so move the data you want charted to the first tab if your workbook has several. - Step 2Upload the Excel or CSV file — Drop an
.xlsxor.csvfile onto the SVG Data Viz tool. Processing happens in-browser with SheetJS — nothing is uploaded to a server. This tool requires the Pro tier (or higher) to run. - Step 3Leave chart type on Bar — The Chart type dropdown defaults to Bar chart (the other options are Line and Pie). Bar is the right choice for comparing discrete categories side by side.
- Step 4Set Label column / Value column if auto-detect guesses wrong — Both fields show the placeholder
Auto-detect if blank. Auto-detect uses the first column as the label and the first column whose first 5 rows all parse as numbers as the value. If your value column sits before a text column it picked by mistake, type the exact header names into these two text inputs. - Step 5Read the SVG source in the preview pane — The result panel shows the raw SVG markup (it is a text-output tool, so you see the
<svg>source, not a rendered picture — and only the first 4000 characters are shown inline, with a truncation note). Paste it into any HTML file or a browser to see it render. - Step 6Copy or download the SVG — Click Copy to put the full
<svg>string on your clipboard, or Download to savechart-bar.svg. Embed the markup inline in HTML/markdown, or reference the saved file with<img src="chart-bar.svg">.
The three real options
The entire option contract for SVG Data Viz. There are no colour pickers, size fields, sort controls, or 'Pro options panel' — these three controls are everything the tool exposes.
| Control | Type / values | Default | What it does |
|---|---|---|---|
| Chart type | Dropdown: Bar / Line / Pie | Bar | Selects the layout. Bar draws vertical bars with a 5-line value grid and per-bar value labels. |
| Label column | Text input (header name) | blank → first column | The category axis. Blank uses headers[0]. Type an exact header to override. |
| Value column | Text input (header name) | blank → first all-numeric column | The numeric axis. Blank picks the first column where rows 1–5 all parse as numbers, else the second column, else the first. |
Bar-chart render facts
Fixed dimensions and behaviours baked into the SVG output — none are configurable in the UI.
| Aspect | Behaviour | Why it matters |
|---|---|---|
| Canvas size | 640 × 400 px, viewBox="0 0 640 400" | Scales cleanly to any width because of the viewBox; set a width attribute to shrink it. |
| Rows charted | First 20 rows (rows.slice(0, 20)) | A 50-row sheet renders only the first 20 bars; pre-sort or pre-summarise to control which 20 appear. |
| Empty-label rows | Dropped before drawing | Rows with a blank label column never become a bar. |
| Bar colours | 8-colour palette cycling by index | #34d399 · #60a5fa · #f472b6 · #fbbf24 · #a78bfa · #fb923c · #38bdf8 · #4ade80, repeating after the 8th bar. |
| Value labels | Drawn above each bar; integers shown whole, decimals to 1 dp | 42 stays 42; 42.37 shows as 42.4. |
| Category labels | Rotated −30°, truncated to 7 chars + ellipsis when longer than 8 | Engineering renders as Enginee… on the axis. |
| Chart title | <filename without extension> — <value column> | q3-revenue.xlsx charting Revenue titles the SVG q3-revenue — Revenue. |
Tier limits (excel family)
SVG Data Viz requires Pro tier or higher to run at all — the Free row is shown for completeness but the tool rejects Free-tier requests.
| 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
Real before/after examples. The code blocks show the input sheet and the salient parts of the emitted SVG — not the full 640×400 markup, which is long.
Clean two-column sheet, auto-detected
The happy path: a label column followed by a numeric column. Auto-detect picks Region as the label (first column) and Sales as the value (first all-numeric column), so you change nothing.
Input (region-sales.xlsx, sheet 1): Region,Sales North,1200 South,980 East,1540 West,760 Config: chartType=bar, label/value blank (auto) Output: chart-bar.svg <svg ... width="640" height="400" viewBox="0 0 640 400" ...> <text ...>region-sales — Sales</text> <rect ... fill="#34d399" .../> (North, 1200) <rect ... fill="#60a5fa" .../> (South, 980) ... 4 bars, value labels above each
Value column sits after a text column — override it
Auto-detect scans for the first column whose first five rows are all numeric. When a text column (Status) sits between label and number, name the value column explicitly so the right field is charted.
Input: Feature,Status,Votes Dark mode,shipped,340 SSO,planned,210 Export,shipped,155 Problem: auto-detect may not land on Votes. Fix: Label column = Feature, Value column = Votes Result: bars sized by Votes (340/210/155), labelled Dark mode / SSO / Export on the axis.
More than 20 categories — only the first 20 chart
The tool hard-caps at the first 20 rows. To chart your top performers, sort descending in Excel first so the meaningful bars survive the cut.
Input: 35-row product list, unsorted Naive result: bars for products in rows 1–20 (whatever order the sheet happened to be in). Better: sort by Units DESC in Excel, then upload. → chart-bar.svg shows the top 20 sellers, largest first.
Long labels get truncated on the axis
Category labels longer than 8 characters are clipped to 7 plus an ellipsis and rotated −30°. Shorten labels in the sheet if the full text matters in the chart.
Input: Department,Headcount Engineering,48 Customer Success,22 People Operations,9 Axis renders: "Enginee…" "Custome…" "People …" Fix in Excel: rename to short forms — Eng, CS, People — so the axis reads cleanly.
Embed the result inline in an HTML page
Because the output is a complete <svg> element, you paste it directly into the document body. No script tag, no CSS, no asset request.
<!-- after Copy from the result panel -->
<section class="report">
<h2>Q3 sales by region</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="640"
height="400" viewBox="0 0 640 400"
style="background:#0f1117;..."> ... </svg>
</section>
To shrink it: keep the viewBox, set width="480"
on the <svg> — it scales proportionally.Edge cases and what actually happens
Free tier upload
Rejected (Pro required)SVG Data Viz throws SVG Data Viz requires Pro tier. for Free-tier users — the tool never runs the chart code on Free. Upgrade to Pro (50 MB / 100,000 rows / 5 files), Pro-media, or Developer to generate charts.
Value column is non-numeric text
Charted as 0Each cell is parsed with parseFloat; anything that doesn't parse becomes 0. A value column full of text (high, medium, low) produces a chart of zero-height bars. Use a numeric column, or map the categories to numbers in Excel first.
Numbers stored with currency symbols or thousands separators
Partially parsedparseFloat("$1,200") reads 0 (the leading $ stops it) and parseFloat("1,200") reads 1 (it stops at the comma). Strip currency symbols and grouping separators in Excel so cells hold bare numbers like 1200 before charting.
Sheet has more than 20 rows
By design (first 20)Only the first 20 rows are drawn (rows.slice(0, 20)). This is intentional — more than 20 bars become unreadable at 640 px wide. Sort or filter in Excel so the rows you care about are at the top.
Data lives on the second or third sheet
Not chartedThe tool reads sheet index 0 — the first sheet only. If your data is on Sheet2, move or copy it to the first tab before uploading, or it won't be seen.
Rows with a blank label column
DroppedRows where the label cell is empty are filtered out before drawing (.filter(d => d.label)). Spacer rows and blank trailing rows simply don't become bars — no error, no empty bar.
Special characters in labels (&, <, >, ")
Escaped (preserved)Labels and the title are HTML-escaped (& → &, < → <, > → >, " → ") so the SVG stays well-formed. R&D renders correctly as R&D in the markup and displays as R&D.
Empty file or header-only sheet
Empty SVGA file with no data rows returns the literal <svg/>. A sheet with headers but no parseable numeric rows returns the comment <!-- No numeric data found -->. Neither is an error — check that your sheet actually contains data rows.
All values are zero or negative
Rendered (min height)The value axis maximum is Math.max(...values, 1), so an all-zero column still produces a valid grid; every bar is drawn at the 2 px minimum height (Math.max(2, ...)). For a meaningful chart, ensure at least one positive value.
Need a colour other than the 8-colour palette
Not supportedThe palette is fixed and cycles by bar index; there is no colour option in the UI. To recolour, edit the fill="#..." attributes in the downloaded SVG by hand, or restyle via CSS once the SVG is inline in your page.
Frequently asked questions
Do I need Chart.js, D3, or any JavaScript to use the chart?
No. The output is a single static <svg> element with no script tags and no external references. It renders in any browser, markdown viewer, or SVG-capable document with nothing else attached — that is the whole point of the tool.
How many rows can the chart show?
The first 20 rows of the first sheet. Beyond that they're ignored for readability. If you have more, sort or filter in Excel so the 20 rows you want are at the top before uploading.
Can I change the bar colours?
Not in the tool. Bars cycle through a fixed 8-colour palette (#34d399, #60a5fa, #f472b6, #fbbf24, #a78bfa, #fb923c, #38bdf8, #4ade80). There is no colour picker or 'Pro options panel'. To recolour, edit the fill attributes in the downloaded SVG or override them with CSS when it's inline.
How does the tool decide which columns to chart?
If you leave both fields blank, it uses the first column as the label and the first column whose first five rows all parse as numbers as the value (falling back to the second column, then the first). To override, type the exact header names into the Label column and Value column inputs.
What size is the SVG and can I resize it?
It is 640 × 400 px with viewBox="0 0 640 400". Because of the viewBox it scales without distortion — set a width attribute (e.g. width="480") on the <svg> tag and the height follows proportionally.
Why are my numbers showing as zero-height bars?
The value cells aren't parsing as numbers. Currency symbols ($1,200), thousands separators (1,200), or text values all break parseFloat. Clean the column in Excel so it holds bare numbers like 1200 and re-upload.
Does it read all sheets in my workbook?
No — only the first sheet (index 0). Move the data you want charted to the first tab before uploading.
Is the chart rendered as a picture in the tool, or do I see code?
You see the SVG source code in the result panel (the first 4000 characters, with a truncation note for longer output) because this is a text-output tool. Copy or Download the markup and open it in a browser, or paste it inline in a page, to see it render visually.
What file does Download produce?
A file named chart-bar.svg (the filename matches the chart type — chart-line.svg or chart-pie.svg for the other layouts). It's a plain SVG file you can commit to a repo, attach to a doc, or reference with <img>.
Does my data leave my computer?
No. Parsing and SVG generation run entirely in your browser via SheetJS. The spreadsheet contents are never uploaded to a server.
Can I combine multiple files into one chart?
No — this tool charts a single uploaded file. Combine the sheets first with the Multi-Sheet Joiner, then upload the result. For a top-N summary before charting, run the Pivot Table Generator first.
What if I want a line or pie chart instead?
Switch the Chart type dropdown to Line or Pie. Line is best for time-series trends and Pie for category proportions. The same column-detection rules apply. Other dev-bridge exports for the same data include the Python Dict/List Generator and the Base64 Encoder.
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.