Zero Signup ToolsFree browser tools

Generator Tools

Bar Chart Generator

Paste labels and values to draw a bar chart in your browser. Vertical or horizontal, per-bar colors, gridlines, value labels, SVG and PNG export.

Quick start

39 chars

One row per line. Format: label, value. Add a third column for a per-bar color: Sales, 42, #f87171.

Live preview

010,00020,00030,00012,500Q1Q117,800Q2Q221,400Q3Q319,600Q4Q4

The preview renders the same SVG you copy and download. Charts are drawn locally; your data is not uploaded.

Rows

4

Sum

71,300

Min

12,500

Max

21,400

Chart options

Orientation
Color mode
Font family

SVG markup

Copy the full SVG to paste into a document, slide deck, or component. The markup includes a viewBox so it scales cleanly to any container.

How to use

  1. Paste your data into the input panel, one row per line, in the form label, value. Lines that start with # or // are treated as comments.
  2. Pick Vertical or Horizontal orientation. Optionally type a chart title, a bottom axis label, and a side axis label.
  3. Choose Single color, Palette, or Per row coloring. For per-row colors, add a third column with a hex code or a CSS color name to any data row.
  4. Adjust width, height, font size, and bar gap with the sliders. Toggle gridlines, value labels, and transparent background to suit the destination.
  5. Click Copy SVG to paste the chart into a document or component, Download .svg for vector use, or Download .png for slides and social posts.

About this tool

Bar Chart Generator turns a short list of label and value rows into a clean, exportable bar chart. The input takes one row per line in the form "label, value", with optional CSV quoting so a label can contain a comma, and an optional third column that sets a per-bar color ("Sales, 42, #f87171"). Choose vertical or horizontal orientation, set the chart title and axis labels, pick a single bar color, an automatic 12-color palette, or per-row colors, and adjust width, height, font size, and bar gap with sliders. Toggle gridlines, value labels on each bar, and a transparent background. The Y axis (or X axis in horizontal mode) is computed with the Heckbert nice-number algorithm so ticks land on round values and the chart does not waste space; negative values render below the baseline; percentages, locale separators, and quoted labels are tolerated. The live preview, the copyable SVG markup, and the rasterized PNG download are all driven from a single SVG string built in your browser, so the preview is always exactly what you copy or save. Useful for slides, reports, dashboards, READMEs that need an embedded chart image, blog posts, classroom handouts, marketing one-pagers, social posts, and any quick visualization where opening a spreadsheet feels heavy. All parsing, layout, rendering, and export run locally; no data is uploaded.

Free to use. Works in your browser. No signup, no login.

Related tools

You may also like

All tools
All toolsGenerator Tools