Horizontal bar chart maker for rankings and long labels

How to use the horizontal bar chart maker

1. Paste your rows into Chart data, one per line: a label, a comma, then the number, such as Offline mode,128.
2. Choose Sort bars: Largest first (the default), Smallest first or Keep my order.
3. Leave Show value labels ticked to print each number at the end of its bar.
4. Optionally type a label into Highlight one bar (its label) and a Value axis title such as “Votes” or “Responses”.
5. Pick a Colour theme, Background and Width, then copy the SVG or download horizontal-bar-chart.svg.

What it does and when to use it

Horizontal bars are the usual way to present a ranking: the most requested features, the top reasons customers gave for leaving, sales per sales rep, or the countries in a survey. Because labels are written level on the left, a reader can scan the names like a list and then compare bar lengths.

The scale always includes zero, so bar length is an honest picture of the value. When some values are negative (a percentage change, a profit or loss), those bars extend to the left of a darker zero line and their numbers are printed on the left side.

If your categories are short and follow an order such as months, the vertical bar chart maker fits better. To show how each total splits into parts, try the stacked bar chart. To count answers in a raw survey column before charting them, use the frequency counter.

How it works

The label column is sized to the longest label but capped at 38% of the chart width. Labels longer than that are cut with “…” and a notice tells you how many. Text widths are estimated from character shapes, because the chart is built without measuring text on screen. The value axis gets rounded steps (1, 2 or 5 × 10ⁿ) and light grid lines. The SVG includes a <title> and a <desc> listing each bar in display order, and it is drawn entirely in your browser.

Worked examples

Feature votes (the sample). Six features, sorted largest first, from Offline mode at 128 down to Calendar sync at 38, each with its count at the end of the bar.

Change that goes below zero. Norway,4.2, Chile,-1.5, Kenya,2.8 with Smallest first. The chart’s description runs Chile: -1.5; Kenya: 2.8; Norway: 4.2, and Chile’s bar points left from zero.

Long survey answers in a narrow chart. Three answers at a width of 480 px, with “Delivery costs are shown too late” highlighted. The two longest answers do not fit, and the tool says:

2 labels were shortened to fit; widen the chart to show more.

At 720 px only the longest answer is still cut; at 800 px all three fit.

Limits and tips

• More than about 25 bars makes a tall image; consider showing only the top entries.
• Highlighting works for single-series charts; with several series each series keeps its own colour.
• The download is SVG. Convert it with the SVG to PNG converter if you need a bitmap.