Skip to content
Lizely

Table Chart Maker

Turn a small CSV data set into a clean table chart and downloadable SVG without uploading the data.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Paste CSV containing one header row and 1–50 data rows, quoting cells that contain commas or line breaks.
  2. 2.Select Generate table chart and compare the parsed HTML preview with the source data.
  3. 3.Download the escaped SVG and inspect long or wide cells at the final display size before publishing.

About Table Chart Maker

Table Chart Maker converts a small comma-separated data set into a readable table and a standalone SVG image entirely in the browser. Paste a header row followed by data rows, generate the chart, inspect the HTML preview, and download a scalable file. The page does not upload labels, values, notes, names, or generated artwork.

The CSV parser supports commas, CRLF or LF line endings, quoted fields, commas inside quoted fields, and doubled quotation marks inside quotes. A field such as "Ada, A." stays in one column, and "Said ""hello""" becomes Said "hello". Quoted fields must begin with a quote, and only a comma or line break may follow a closing quote. Malformed input is rejected rather than guessed.

The first record supplies column headings. Every heading must contain text, and each later row must have exactly the same number of cells. The tool accepts two through ten columns and one through fifty data rows. Input is limited to 20,000 JavaScript characters and each cell to 120 Unicode characters, keeping the SVG and browser layout bounded on ordinary devices.

The on-page preview uses real HTML table elements, so headers and cells remain selectable and structurally meaningful. It is a visual confirmation of parsed values, not a spreadsheet: there are no formulas, sorting controls, merged cells, filters, pivot operations, inferred types, hidden columns, or automatic totals. All values remain literal text.

The downloaded image uses SVG rectangles and text. Column widths are estimated from the longest displayed value in each column, with minimum and maximum widths to prevent extremely narrow or unbounded columns. Rows use a fixed height. Header cells use a distinct background, and alternating body rows improve visual tracking. Long displayed values are shortened after 30 Unicode characters in the image, while the HTML preview retains the complete parsed cell.

Every string inserted into SVG is XML-escaped. Ampersands, angle brackets, quotation marks, and apostrophes become entities, and invalid XML control characters are replaced. A cell containing script-looking markup is rendered as visible text rather than active markup. The preview is built with React text nodes and does not inject the generated SVG into the document.

The SVG includes an explicit width, height, viewBox, image role, and accessible label. It uses common system-style Arial text and fixed colors so the downloaded asset is self-contained. The file can be opened in a browser, presentation editor, design application, or vector-capable document workflow, subject to that program’s SVG support.

Table charts are useful for scorecards, schedules, feature comparisons, small directories, price lists, event summaries, research snapshots, and social graphics where exact text matters more than a plotted trend. For numeric comparison, a bar or pie chart may communicate magnitude faster. For tasks with start and end dates, a Gantt chart may be a better representation.

This tool intentionally does not interpret Markdown tables, pasted HTML, XLSX workbooks, Google Sheets links, remote URLs, JSON objects, tabs, semicolon-delimited regional CSV, or arbitrary delimiter detection. Those formats have different parsing and security requirements. Convert the source to comma-separated UTF-8 text before using this page.

The image does not preserve every spreadsheet feature or guarantee print accessibility. Very wide tables may require horizontal scrolling, and condensed text may be difficult to read when embedded at a small size. Check spelling, row alignment, truncated image labels, color contrast in the destination, and final physical dimensions before publishing. Keep the source CSV as the authoritative editable record.

For reliable output, start with a short representative sample, quote cells that contain commas or line breaks, double any literal quote inside a quoted field, and confirm the displayed row and column counts. Download the SVG only after comparing every preview cell with the source. Nothing is saved after the tab is closed.

Methodology & sources

Parse at most 20,000 characters with a state machine supporting RFC-style comma separation, CRLF/LF, quoted fields, embedded commas and doubled quotes; require one nonempty header row, 2–10 equal-width columns, 1–50 body rows, and 120 Unicode characters per cell; render a semantic React table; estimate bounded SVG column widths; flatten and truncate image labels; XML-escape all text and replace invalid controls; create a temporary local SVG Blob URL; revoke stale URLs on every edit and unmount.

Frequently asked questions

Can cells contain commas?
Yes. Wrap the complete cell in double quotes and represent a literal quote inside it with two double quotes.
Does the tool open Excel files?
No. It accepts comma-separated text only and intentionally adds no workbook parsing dependency.
Can a cell execute HTML or JavaScript?
No. Preview cells are React text and every downloaded SVG string is XML-escaped.
Why is a value shorter in the SVG than in the preview?
The image limits displayed cells to 30 Unicode characters to keep columns bounded; the HTML preview retains the full parsed value.

Related tools

Generators guides

View all