Data Visualization Tool: Create Charts from CSV, JSON & Excel Online
Import CSV, JSON, NDJSON, TXT, or Excel files and turn them into charts and tables instantly. Build multi-axis charts, switch chart types, and export as PNG or JPG, all in your browser.
How this data visualization tool reads six file formats and builds charts from them
Turning a spreadsheet into a chart usually means opening Excel or wiring up a charting library by hand. This tool collapses that into one flow: drop a file, let it detect column types automatically, and build any of eight Chart.js chart types from the fields it found. It reads CSV, TSV, plain delimited text, JSON, NDJSON, and Excel workbooks (.xlsx, .xls, .xlsm), which is a wider format range than most single purpose CSV chart tools support.
The tool leans on three well known open source libraries loaded from a CDN: PapaParse for delimited text parsing, SheetJS for Excel workbook reading, and Chart.js for rendering. It checks whether these are already present on the page and only fetches whichever ones are missing, so it doesn’t duplicate script loads on pages that already include them. Once loaded, everything runs client side; your file’s data is parsed and charted in the browser and never uploaded anywhere.
Automatic column type detection
Before you can pick sensible chart axes, the tool needs to know which columns hold numbers, which hold dates, and which hold plain text. It samples the first 200 rows of each column and classifies it by majority vote.
isFinite(parseFloat(v)) for numbers and !isNaN(Date.parse(v)) for dates.
number; same threshold for date. Anything below both thresholds falls back to text.
Aggregation modes in the chart builder
When multiple rows share the same X-axis value, the builder groups them and reduces the Y values down to one number per group using whichever aggregation mode you pick.
| Mode | Calculation |
|---|---|
| Sum | Adds every value in the group |
| Average | Sum divided by count of values in the group |
| Count | Number of rows in the group, ignoring the actual values |
| Min / Max | Math.min or Math.max across the group |
| None | No grouping; every row plots as its own point (used for scatter and bubble charts) |
Eight chart types
Bar, line, pie, doughnut, radar, polar area, scatter, and bubble, all rendered through the same Chart.js instance, swapped by destroying and recreating the chart object when you change type.
Dual Y-axes
Each series in the builder can be assigned to the left or right axis independently, useful when charting two metrics with very different scales, like revenue in dollars against a conversion percentage.
PNG and JPG export
Export reads the canvas directly via toDataURL. JPG export first draws a white background onto a temporary canvas, since JPEG has no transparency channel and would otherwise render a black background.
Charting libraries worth knowing
- Chart.js documentation covers every chart type and option this builder exposes through its UI.
- PapaParse docs detail the delimiter detection and dynamic typing options used during CSV parsing.
- SheetJS (xlsx) documentation explains workbook, sheet, and cell range handling for the Excel import path.
- NDJSON specification defines the newline-delimited JSON format this tool parses line by line.
Charts people build with this
Turning a raw analytics export into a shareable bar chart without opening a spreadsheet program, quickly checking whether an API’s NDJSON log stream has an obvious trend over time, visualizing a client supplied Excel workbook without reformatting it first, building a scatter plot to eyeball correlation between two numeric columns before running formal statistics, and generating a PNG chart image to drop straight into a slide deck or report.
FAQ: Data Visualization Tool
No. Files are parsed and charted entirely in your browser using PapaParse, SheetJS, and Chart.js, all loaded once from a CDN. Your data never leaves your device, which makes this tool suitable for internal or sensitive datasets.
It supports CSV, TSV, plain TXT with a delimiter, JSON, NDJSON (newline-delimited JSON), and Excel files (.xlsx, .xls, .xlsm). Each format has its own import options so you can control exactly how the data is read.
Yes. In the chart builder, each Y series has its own axis dropdown, so you can put one series on the left axis and another on the right axis. This is useful when comparing two fields with very different scales, like revenue and conversion rate.
After loading, the tool samples the values in each column and checks whether they parse as numbers or dates. If a column is mostly numeric it’s treated as a number field, if it matches common date patterns it’s treated as a date, otherwise it’s treated as text. You can still use any column as an X or Y field regardless of its detected type.
When you have repeated X values, for example the same month appearing on multiple rows, aggregation groups those rows together and combines the Y values using sum, average, count, min, or max. Set it to None to plot every row individually instead.
Yes. After uploading an Excel file, sheet tabs appear so you can pick which sheet to load, and an optional range field lets you limit the import to a specific cell range like A1:F50 instead of the whole sheet.
You can export any chart as a PNG (transparent background, sharper edges) or a JPG (white background, smaller file size) directly from the chart builder, using the canvas the chart is drawn on.
There’s no hard limit set by the tool itself since everything runs in your browser’s memory rather than through a server upload, but very large files (hundreds of thousands of rows) may take longer to parse and render depending on your device.
From the blog
Deep dives on the things these tools touch
Minification, UUID collisions, diffing API responses, and the other questions that come up around this toolset.
