DevTools Logo

CSV to Chart

CSV to Chart

Paste or upload CSV data and visualize it as a bar, line, pie, or doughnut chart. Export as PNG.

CSV Input

Chart Settings

    Examples

    Parse the sample 6-month revenue CSV

    Input
    Month,Revenue,Expenses,Profit
January,42000,28000,14000
February,47000,30000,17000
March,53000,32000,21000
April,58000,34000,24000
May,61000,35000,26000
June,66000,37000,29000
    Output
    headers: ["Month", "Revenue", "Expenses", "Profit"]
rows:    6
columns: 4
chart:   Bar (default) — Months on X, Revenue (or any single value column) on Y

    The default sample loads a six-row revenue/expense/profit table. The parser splits it into 1 header row + 6 data rows × 4 columns; the Label dropdown is preselected to Month and the Value chips include Revenue, Expenses and Profit.

    Multi-series bar with two value columns

    Input
    Quarter,Sales,Returns
Q1,15000,800
Q2,18000,1100
Q3,22000,900
Q4,25000,1300
    Output
    chart: Bar (vibrant) — X = Quarter, two series (Sales #2563eb, Returns #dc2626)

    Click the Sales and Returns value-column chips to add both series. The chart config generates two datasets: Sales at full opacity and Returns alongside it, each with its own vibrant-palette colour and a 2px border.

    Non-numeric cell is treated as 0, not a crash

    Input
    Day,Visits
Mon,1240
Tue,1380
Wed,N/A
Thu,1620
    Output
    chart: Line — Wed's point renders at y=0 (parseFloat('N/A') → NaN → 0)

    The buildChartConfig helper runs `parseFloat(value)` on every cell and falls back to 0 when the result is NaN. The chart still renders — Wednesday's point is at the X-axis instead of throwing a parse error.

    About this tool

    The CSV to Chart tool turns a spreadsheet-style table into a real, interactive chart in your browser. Paste CSV (or upload a .csv/.txt file), pick the column for the labels and one or more columns for the values, choose a chart type and a colour palette, and the tool renders a bar, line, pie or doughnut chart instantly. When it looks right, click Export PNG to download the rendered chart for slides, reports or a blog post.

    The parser is the widely-used PapaParse, which handles quoted fields containing commas, escaped quotes, and mixed line endings correctly — so input that other quick-and-dirty CSV parsers misread just works. Values are parsed with parseFloat, so anything that isn't a number is treated as 0 (and the cell is skipped, not crashed on) — ideal for real-world CSVs that mix percentages, currency symbols or stray labels in the numeric columns.

    All four chart types come from Chart.js. The X/Y axes are configured with grid lines that can be toggled, a legend can be shown or hidden, an optional chart title is rendered above the plot, and four built-in palettes (default, pastel, vibrant, monochrome) cover most design systems. Everything runs locally: the CSV never leaves the browser, so it's safe to chart internal metrics, customer data or anything else you wouldn't upload.

    How to use

    1. Paste or upload CSV

      Paste CSV into the left textarea or use the upload button to load a .csv/.txt file. The first row is treated as headers; subsequent rows are data.

    2. Click Generate Chart

      Press the Generate Chart button. The parser splits the data into headers and rows and shows the count of rows × columns below the chart.

    3. Pick a chart type and palette

      Choose Bar, Line, Pie or Doughnut, then pick a palette (default, pastel, vibrant, monochrome) to match your design.

    4. Choose label and value columns

      Use the Label Column dropdown to set the X-axis (or pie slice labels) and toggle the value-column chips to add or remove data series.

    5. Export the chart

      Click Export PNG to download the rendered chart as a high-resolution PNG ready for slides, blog posts or social media.

    Use cases

    Visualising a monthly KPI for a status report

    Export a one-column table of monthly active users from your warehouse, paste it into the tool, and generate a single-series bar chart to drop into a slide.

    Comparing two metrics side by side

    Toggle two value columns on (e.g. Revenue and Cost) and the tool renders a grouped bar chart that makes the gap visible at a glance — no spreadsheet pivot required.

    Quickly prototyping a dashboard widget

    Iterate on a small CSV in a text editor, paste it in, switch between bar / line / pie / doughnut until the shape matches the data story, then hand the format to engineering.

    Showing a share-of-total breakdown

    Switch to Pie or Doughnut, pick a single value column, and the renderer assigns a colour from the palette to every slice — a fast way to express market share or budget split.

    Common mistakes

    Mistake:Including currency symbols, commas, or percent signs in numeric cells.

    Fix:The parser runs parseFloat, so `"$1,240"` becomes NaN and the cell renders as 0. Clean the data first — replace `$1,240` with `1240` and `15%` with `0.15` (or pre-format as a ratio).

    Mistake:Forgetting the header row and getting one data row fewer than expected.

    Fix:The first row is always treated as headers. If your CSV really has no header, prepend a row of dummy names — or switch the column dropdown after generation to remap the value.

    Mistake:Choosing a Pie/Doughnut chart for more than one value column.

    Fix:Pie/Doughnut render the value column as slices of a single series, so adding a second value column visually double-plots the same data. Use Bar or Line for multi-series comparisons.

    Mistake:Assuming the Export PNG file is vector-quality.

    Fix:The export is rendered by the canvas at its current pixel size, so it is a PNG. For a publication-quality vector, generate the chart in a real charting library at the target resolution.

    Frequently asked questions

    Related guides

    Deduplication Done Right: First Occurrence, Order Preserved, Nothing Silent

    Removing duplicates from lists and CSVs by column — why keeping the first occurrence is the right default, and how quoting survives round-trips.

    Visualizing CSV Data: Generating Interactive Web Charts

    How to parse CSV datasets client-side, infer numeric and categorical column types, and render interactive bar, line, and pie charts.

    References & standards

    Related tools

    Base64 Toolbox

    Professional Base64 workspace for text, files and images with Base64URL, MIME, Data URI, strict validation, image preview and ready-to-use snippets.

    C# to VB.NET Converter

    Convert a subset of C# — classes, methods, variables, loops — into VB.NET

    CSV Data Viewer

    Paste CSV and browse rows in a sortable table with delimiter detection

    CSV to JSON Converter

    Paste CSV data and convert it to pretty-printed JSON instantly — supports custom delimiters, header row toggling, and value trimming.

    CSV to Markdown Converter

    Convert CSV to a Markdown table and Markdown tables back to CSV

    CSV to SQL Converter

    Generate SQL INSERT statements from CSV data