A bar chart in Google Sheets is built by selecting two columns of data — a label column and a value column — and choosing Insert → Chart, which converts the range into an editable Column chart that renders vertical bars next to your spreadsheet. The Chart editor opens a side panel where the chart type, chart title, axis titles, tick marks, gridlines, and series colors can be changed without writing a formula. The chart itself is a floating object that can be dragged, resized, duplicated, or saved as an image, and it updates whenever the underlying cells change. If you do not need a spreadsheet at all, the Bar Chart Maker takes the same kind of two-column data, builds a deterministic vertical bar chart in the current browser tab, and exports a standalone SVG file that matches the on-screen preview exactly. Both routes end with a vertical bar chart; the difference is whether you live in a spreadsheet grid with all its surrounding capabilities, or in a single-purpose browser tool whose output is a portable SVG file.
Building a Bar Chart Directly in Google Sheets
When Google Sheets is the natural place for the data, the spreadsheet can produce the chart in a few clicks without any add-ons. The label column holds category names and the value column holds the corresponding numeric measurement; the chart becomes meaningful as soon as those two columns exist.
- Type the category labels in column A and the numeric values in column B, with a header row at the top.
- Select the full range, including both header cells, and choose Insert → Chart from the menu.
- In the Chart editor's Setup tab, open the Chart type dropdown and pick Column chart. Google Sheets calls a vertical bar chart a "Column chart"; the "Bar chart" entry in the same menu renders horizontal bars instead.
- Switch to the Customize tab to set the chart and axis titles, tick frequency, gridline color, and the data-series fill color.
- Click outside the chart to deselect it. The chart is now a free-floating object on the sheet and updates automatically whenever the underlying cells change.
Right-clicking the chart exposes options to move it, save it as an image, or publish it to the web. Because the chart is anchored to cell ranges rather than embedded values, sorting or editing the data updates the bars without rebuilding the chart.
Skipping Google Sheets With the Bar Chart Maker
Working inside a spreadsheet brings capabilities most bar charts never use: cell formatting, named ranges, formulas, sharing controls. When the goal is just to turn a short list of categories and values into a readable, downloadable chart, those capabilities are overhead.
The Bar Chart Maker is a single-purpose browser tool that produces a vertical bar chart from a small categorical dataset and exports the result as a standalone SVG file. Parsing, layout, preview rendering, and Blob download all happen in the current tab, so labels, values, and titles never leave the browser. The SVG is 520 pixels tall and grows horizontally as more rows are added, which keeps category slots separated instead of squeezing 30 labels into a mobile-narrow column. The exported file is a normal anchor download powered by the same SVG string that drives the preview, so what you see is exactly what you save.
This is most useful when the dataset is small enough to type or paste in directly, when there is no spreadsheet to anchor the chart to, or when the deliverable should be a portable SVG rather than a sheet-embedded object. Readers who keep their data in spreadsheets can apply the same idea to make a bar chart from Excel data without Excel, since the input format is identical.
| Feature | Google Sheets Column chart | Bar Chart Maker |
|---|---|---|
| Data location | Two columns of spreadsheet cells | One text field with label,value rows |
| Chart style | Floating object on the sheet | 520 px SVG that grows horizontally |
| Axis control | Customize panel with sliders and inputs | Deterministic nice-domain ceiling, five fixed ticks |
| Output format | Sheet-embedded chart, optional PNG export | Standalone SVG that matches the preview |
| Data handling | Saved with the spreadsheet on Google's servers | Stays in the current browser tab |
| Updates | Re-renders when source cells change | Re-renders only when Generate is clicked again |
What Format the Bar Chart Maker Accepts
The input format is CSV-lite on purpose, so the parser can be strict without guessing. Every accepted row is read as exactly one label, one comma, and one number.
Each non-empty row must contain exactly one comma. The text before the comma is the category label and the text after it is the numeric value. A label can be at most 24 UTF-16 code units and a numeric token at most 40, with surrounding whitespace trimmed from both. The number must be a nonnegative finite base-ten decimal or scientific notation; both e and E are accepted, negative zero is normalized to zero, and lexical nonzero input that underflows to zero is rejected. The chart accepts between 2 and 30 non-empty rows total. Blank or whitespace-only lines are ignored.
| Input row | Accepted? |
|---|---|
| Apples,12 | Yes |
| Pears, 3.5 | Yes (whitespace is trimmed) |
| Sales 2024,1.2e3 | Yes (scientific notation accepted) |
| "Bananas",15 | No (quoted fields are not supported) |
| Mangoes, | No (empty numeric value) |
| ,42 | No (empty label) |
| Grapes,-2 | No (negative values are not supported) |
| Oranges,73,extra | No (more than one comma per row) |
Quoted fields, quoted commas, additional columns, typed units, expressions, hexadecimal, Infinity, and NaN are not supported. Duplicate labels are allowed and remain separate bars in input order; the tool does not aggregate, sort, or infer units.
Steps to Generate, Preview, and Download the SVG
The full workflow is three actions: type, generate, download.
- Paste a title into the title field if a visible chart title is wanted; leaving it blank still gives the SVG the accessible label Bar chart.
- Paste the label,value rows into the data field, one per line, with exactly one comma per non-empty row.
- Click Generate. The chart preview appears immediately if every row passes the parser; any malformed row rejects the entire request and the previous preview, status, and download are cleared.
- Read the resulting chart: category labels along the bottom, a baseline at zero, and five evenly spaced numeric ticks up the left side. Hover any bar to read its tooltip.
- Click Download SVG. The downloaded file is the exact string rendered in the preview, packaged as a Blob and offered through a normal anchor download.
Editing the title or data at any step immediately clears the previous preview, status, and download, so a partially built chart cannot leak into the saved file. The same SVG string powers the preview and the Blob download, so the file you save is identical to what you reviewed.
How the Axis, Ticks, and Zero Bars Behave
The chart uses a nonnegative linear scale. Zero always maps to the baseline, and the displayed axis maximum maps to the top of the plot area. The upper bound is rounded up to a finite 1, 2, 5, or 10 multiple of a power of ten, and five evenly spaced reference ticks expose that range.
Worked example: if the largest value across the rows is 73, the parser rounds the axis ceiling up to the next 1, 2, 5, or 10 multiple of a power of ten, which is 100. The five reference ticks therefore sit at 0, 25, 50, 75, and 100, and every other bar's height is its value divided by 100, scaled to the plot height. A bar at 73 reaches 73 / 100 = 0.73 of the way up the plot, and a bar at 0 stays flat on the baseline. The D3 linear scale reference describes the underlying continuous mapping that this product-defined nice-domain approach is built on, with the note that the tool's tick choice is deterministic but is not a promise to reproduce every D3 tick decision.
Bar height stays proportional to the supplied value. There is no minimum-height bar added for visibility, because doing so would break the stated linear scale. Every nonzero bar carries a tooltip showing the exact value, and the markup includes accessible labels and descriptions, so the chart remains readable for assistive technology in addition to being visually clear.
Limits and Edge Cases Worth Checking Before You Publish
Several edge cases are worth scanning for before the chart goes anywhere public.
All-zero data. If every row's value is zero, the chart switches to an explicit zero-to-one reference range. Every bar stays at zero height on the baseline, and the chart displays an explicit all-zero note. No division-by-zero error appears and no supplied value is altered.
Extreme ranges. A tiny positive value next to a very large one can render at sub-pixel height because the linear ratio is smaller than SVG coordinate precision. The tooltip still reports the correct value, but the bar may be visually indistinguishable from zero. Use a logarithmic chart or split the data into separate charts when this matters.
Row limits. Two rows is the minimum and thirty is the maximum. Going over thirty fails with an exact non-empty row count, never a silent truncation. One malformed row rejects the whole request — the parser does not skip bad rows, keep the first thirty, or substitute zero for an unreadable value.
Output safety. Every label and title is XML-escaped before it enters SVG markup, following the rules in the W3C SVG 2 specification. Ampersands, angle brackets, quotes, and apostrophes become entities; XML-forbidden control characters and unpaired surrogates become the replacement character U+FFFD. A script-looking label stays visible text rather than becoming an SVG element. Numeric coordinates come only from validated finite values rounded to three decimals.
Local processing. Parsing, layout, preview rendering, Blob creation, and download all happen in the current browser tab. No label, value, title, SVG, or interaction is uploaded to a server.