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
One row per line. Format: label, value. Add a third column for a per-bar color: Sales, 42, #f87171.
Live preview
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
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
- 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.
- Pick Vertical or Horizontal orientation. Optionally type a chart title, a bottom axis label, and a side axis label.
- 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.
- Adjust width, height, font size, and bar gap with the sliders. Toggle gridlines, value labels, and transparent background to suit the destination.
- 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
CSS Pie Chart Generator
Generate a pure CSS pie or donut chart with live preview and SVG fallback.
Open tool
GeneratorGraph Paper Generator
Six grid styles, real-size SVG and PNG output, browser print at true millimetre scale.
Open tool
ConverterCSV Column Stats
Per-column type, missing, distinct, min, max, mean, median, and top values.
Open tool
ConverterSVG to PNG Converter
Rasterize SVG markup or files to PNG at any size, with transparent or solid backgrounds.
Open tool
ImageImage Histogram Generator
Drop an image to see RGB and luminance histograms with exposure stats and clipping.
Open tool
ConverterCSV Viewer
View any CSV as a sortable, filterable, paginated table.
Open tool