TapCub is live — analytics, insights and live chat, free on one platform

Chart maker · Bar Bar graph maker

Paste a table and get a bar chart that starts at zero, sorts on request and labels every bar. Several number columns become grouped or stacked bars; long category names fit better on horizontal bars.

  • Paste from Excel, Sheets or CSV
  • SVG, PNG and embed code
  • Runs locally
Chart maker

Paste data, pick a chart

First column = categories (or the x-axis); every other column = one series. A first row with names is used as the header. For a Sankey diagram, paste source, target, value rows instead.

Tabs (copied from a spreadsheet), commas or semicolons. 1,200, 12%, $5.40 and −30 are all read as numbers.

Runs entirely in your browser. Nothing you type here is uploaded or stored by TapCub.
Sign-ups by channelOrganic: Jan 1,240, Feb 1,380, Mar 1,510, Apr 1,620, May 1,750; Paid: Jan 860, Feb 920, Mar 1,040, Apr 980, May 1,010; Referral: Jan 310, Feb 290, Mar 350, Apr 420, May 460Sign-ups by channelOrganicPaidReferralJan · Organic: 1,2401,240Jan · Paid: 860860Jan · Referral: 310310Feb · Organic: 1,3801,380Feb · Paid: 920920Feb · Referral: 290290Mar · Organic: 1,5101,510Mar · Paid: 1,0401,040Mar · Referral: 350350Apr · Organic: 1,6201,620Apr · Paid: 980980Apr · Referral: 420420May · Organic: 1,7501,750May · Paid: 1,0101,010May · Referral: 46046005001,0001,5002,000JanFebMarAprMay
Inline SVG embed code

Paste it straight into an HTML page, a CMS block that accepts HTML, or a Markdown file that allows HTML. It scales to its container and has a title for screen readers.

chart.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 386" width="680" height="386" font-family="Inter,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,&quot;Noto Sans SC&quot;,system-ui,sans-serif" role="img" aria-label="Sign-ups by channel" style="display:block;max-width:100%;height:auto;margin:0 auto"><title>Sign-ups by channel</title><desc>Organic: Jan 1,240, Feb 1,380, Mar 1,510, Apr 1,620, May 1,750; Paid: Jan 860, Feb 920, Mar 1,040, Apr 980, May 1,010; Referral: Jan 310, Feb 290, Mar 350, Apr 420, May 460</desc><rect width="680" height="386" fill="#ffffff"/><text x="16" y="28" font-size="16" font-weight="700" fill="#0b0f19">Sign-ups by channel</text><rect x="16" y="46" width="10" height="10" rx="2" fill="#2050f0"/><text x="31" y="55" font-size="12" fill="#4b5563">Organic</text><rect x="92.3" y="46" width="10" height="10" rx="2" fill="#eb6834"/><text x="107.3" y="55" font-size="12" fill="#4b5563">Paid</text><rect x="148.8" y="46" width="10" height="10" rx="2" fill="#1baf7a"/><text x="163.8" y="55" font-size="12" fill="#4b5563">Referral</text><path d="M55.46000000000001 350H664" stroke="#d1d5db" stroke-width="1"/><path d="M55.46000000000001 280H664" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 210H664" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 140H664" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 70H664" stroke="#e5e7eb" stroke-width="1"/><path d="M74.3 350V180.4Q74.3 176.4 78.3 176.4H97Q101 176.4 101 180.4V350Z" fill="#2050f0"><title>Jan · Organic: 1,240</title></path><text x="87.6" y="171.4" text-anchor="middle" font-size="10" fill="#0b0f19">1,240</text><path d="M103 350V233.6Q103 229.6 107 229.6H125.6Q129.6 229.6 129.6 233.6V350Z" fill="#eb6834"><title>Jan · Paid: 860</title></path><text x="116.3" y="224.6" text-anchor="middle" font-size="10" fill="#0b0f19">860</text><path d="M131.6 350V310.6Q131.6 306.6 135.6 306.6H154.3Q158.3 306.6 158.3 310.6V350Z" fill="#1baf7a"><title>Jan · Referral: 310</title></path><text x="145" y="301.6" text-anchor="middle" font-size="10" fill="#0b0f19">310</text><path d="M196 350V160.8Q196 156.8 200 156.8H218.7Q222.7 156.8 222.7 160.8V350Z" fill="#2050f0"><title>Feb · Organic: 1,380</title></path><text x="209.4" y="151.8" text-anchor="middle" font-size="10" fill="#0b0f19">1,380</text><path d="M224.7 350V225.2Q224.7 221.2 228.7 221.2H247.4Q251.4 221.2 251.4 225.2V350Z" fill="#eb6834"><title>Feb · Paid: 920</title></path><text x="238" y="216.2" text-anchor="middle" font-size="10" fill="#0b0f19">920</text><path d="M253.4 350V313.4Q253.4 309.4 257.4 309.4H276Q280 309.4 280 313.4V350Z" fill="#1baf7a"><title>Feb · Referral: 290</title></path><text x="266.7" y="304.4" text-anchor="middle" font-size="10" fill="#0b0f19">290</text><path d="M317.7 350V142.6Q317.7 138.6 321.7 138.6H340.4Q344.4 138.6 344.4 142.6V350Z" fill="#2050f0"><title>Mar · Organic: 1,510</title></path><text x="331.1" y="133.6" text-anchor="middle" font-size="10" fill="#0b0f19">1,510</text><path d="M346.4 350V208.4Q346.4 204.4 350.4 204.4H369.1Q373.1 204.4 373.1 208.4V350Z" fill="#eb6834"><title>Mar · Paid: 1,040</title></path><text x="359.7" y="199.4" text-anchor="middle" font-size="10" fill="#0b0f19">1,040</text><path d="M375.1 350V305Q375.1 301 379.1 301H397.7Q401.7 301 401.7 305V350Z" fill="#1baf7a"><title>Mar · Referral: 350</title></path><text x="388.4" y="296" text-anchor="middle" font-size="10" fill="#0b0f19">350</text><path d="M439.4 350V127.2Q439.4 123.2 443.4 123.2H462.1Q466.1 123.2 466.1 127.2V350Z" fill="#2050f0"><title>Apr · Organic: 1,620</title></path><text x="452.8" y="118.2" text-anchor="middle" font-size="10" fill="#0b0f19">1,620</text><path d="M468.1 350V216.8Q468.1 212.8 472.1 212.8H490.8Q494.8 212.8 494.8 216.8V350Z" fill="#eb6834"><title>Apr · Paid: 980</title></path><text x="481.4" y="207.8" text-anchor="middle" font-size="10" fill="#0b0f19">980</text><path d="M496.8 350V295.2Q496.8 291.2 500.8 291.2H519.4Q523.4 291.2 523.4 295.2V350Z" fill="#1baf7a"><title>Apr · Referral: 420</title></path><text x="510.1" y="286.2" text-anchor="middle" font-size="10" fill="#0b0f19">420</text><path d="M561.1 350V109Q561.1 105 565.1 105H583.8Q587.8 105 587.8 109V350Z" fill="#2050f0"><title>May · Organic: 1,750</title></path><text x="574.5" y="100" text-anchor="middle" font-size="10" fill="#0b0f19">1,750</text><path d="M589.8 350V212.6Q589.8 208.6 593.8 208.6H612.5Q616.5 208.6 616.5 212.6V350Z" fill="#eb6834"><title>May · Paid: 1,010</title></path><text x="603.1" y="203.6" text-anchor="middle" font-size="10" fill="#0b0f19">1,010</text><path d="M618.5 350V289.6Q618.5 285.6 622.5 285.6H641.1Q645.1 285.6 645.1 289.6V350Z" fill="#1baf7a"><title>May · Referral: 460</title></path><text x="631.8" y="280.6" text-anchor="middle" font-size="10" fill="#0b0f19">460</text><text x="47.5" y="354" text-anchor="end" font-size="11" fill="#6b7280">0</text><text x="47.5" y="284" text-anchor="end" font-size="11" fill="#6b7280">500</text><text x="47.5" y="214" text-anchor="end" font-size="11" fill="#6b7280">1,000</text><text x="47.5" y="144" text-anchor="end" font-size="11" fill="#6b7280">1,500</text><text x="47.5" y="74" text-anchor="end" font-size="11" fill="#6b7280">2,000</text><text x="116.3" y="367" text-anchor="middle" font-size="11" fill="#4b5563">Jan</text><text x="238" y="367" text-anchor="middle" font-size="11" fill="#4b5563">Feb</text><text x="359.7" y="367" text-anchor="middle" font-size="11" fill="#4b5563">Mar</text><text x="481.4" y="367" text-anchor="middle" font-size="11" fill="#4b5563">Apr</text><text x="603.1" y="367" text-anchor="middle" font-size="11" fill="#4b5563">May</text></svg>

Version v1.0Updated Update history

Is a bar chart right?

What data suits a bar chart

Bars are the safe default for comparing amounts between categories, because lengths on a common baseline are what people judge most accurately.

Categories you compare

Channels, countries, products, plans. Sort largest first unless the categories have an order of their own (months, age bands, ratings).

Grouped: compare within a category

Side-by-side bars answer “which series is bigger in March?”. Keep it to about four series per group.

Stacked: compare totals

Stacked bars show the total and the mix, but only the bottom segment shares a baseline. Use them when the total is the point.

Horizontal for long names

Category names read left to right on horizontal bars instead of being cut off or rotated. Also a good choice past about 12 categories.

Bars always start at zero here. If the differences you care about are small relative to the values, a line chart (which may zoom) or a table of differences is more honest.

How to use it

From spreadsheet to slide in four steps

The chart redraws as you type.

  1. 1

    Copy the cells

    Select the table in Excel, Google Sheets or Numbers — including the header row — and copy. Or paste CSV text.

  2. 2

    Paste and pick a type

    The first column becomes the categories; each other column becomes a series. Pick the chart type; the checks under the chart tell you if the data does not fit it.

  3. 3

    Tidy it up

    Add a title, choose a palette, sort bars largest first, switch bars to horizontal for long names, stack or group several columns.

  4. 4

    Export

    Download a PNG for slides and chat, an SVG for print and design tools, or copy the inline SVG to embed it in a web page.

How it reads your data

The parsing rules

The tool guesses as little as possible and tells you when it had to.

  • Separator: tabs if the text has any (that is what a spreadsheet copy gives you), otherwise whichever of comma, semicolon or vertical bar gives the most consistent columns. Quoted CSV cells are supported.
  • Header: the first row is a header if any cell after the first column is not a number.
  • Numbers: thousands separators, currency symbols, a trailing %, a leading minus or accounting brackets, full-width digits and 万 / 亿 / k suffixes are understood. Anything else is left empty and listed.
  • Limits: 200 rows and 8 number columns. Pie charts keep the 7 largest slices and group the rest as “Other”.
Funnel calculator for step-by-step conversion
What each chart expects
ChartColumnsExample row
Bar / linelabel, value, [value…]Jan, 1240, 860
Pielabel, value (positive)Email, 860
Funnelstep, count (in order)Added to cart, 1248
Sankeysource, target, valueGoogle, Pricing, 150
Worked example

One table, three honest charts

The default data is five months of sign-ups from three channels. The same numbers answer different questions depending on the chart.

Sign-ups by channel, January to May
QuestionChartWhat it shows
Which channel brings the most?Bar, groupedOrganic leads every month; paid is second.
Is the total growing?Bar, stackedTotal rises from 2,410 in January to 3,220 in May.
Which channel is growing fastest?LineReferral grows 48% (310 → 460), organic 41%, paid 17%.
What share was referral in May?Pie (May only)460 of 3,220 = 14.3%.

Percent change = (May − January) ÷ January. Paste just the May column into a pie to check the share yourself.

Common mistakes

Charts that mislead without lying

Every number can be right and the chart still gives the wrong impression.

Bars that don’t start at zero

A bar’s length is its value. Cut the axis at 900 and 950 looks twice as big as 925. This tool always starts bars at zero; lines may zoom in.

Pies with a total slice

A “Total” row pasted with the parts makes every slice half its real size. The tool warns when a row equals the sum of the others.

Two y-axes

With two scales, where the lines cross is decided by whoever set the axes. Use two charts, or index both series to 100.

Colour as the only label

About one man in twelve has some colour-vision deficiency. Every chart here also names its series in a legend or label.

In TapCub

Charts that stay up to date

A pasted chart is a snapshot. In TapCub the same charts are built from live events and refresh by themselves.

Dashboards

Pin charts from any report and share them with your team, or by read-only link.

Learn more

Funnels and paths

Step conversion, time between steps, and the real paths before and after any event.

Learn more

Ask in plain language

Type a question and get a chart with a one-line conclusion.

Learn more
Explore product analytics
FAQ

Chart maker questions

Still have a question?

Chat with the team behind TapCub — we usually reply within a few hours on business days.

Chat with usHelp center
Bar chart or column chart?

Same chart, different direction: columns are vertical, bars horizontal. Use “Bar direction” to switch; horizontal fits long names, vertical suits time.

When should I stack the bars?

When the total matters and the parts are pieces of it, such as sign-ups by channel per month. To compare one channel across months, side by side is easier.

Can bars be negative?

Yes. Negative values grow down (or left) from the zero line, and in stacked mode positives and negatives stack separately.

Why does the y-axis always start at zero?

Because a bar’s length encodes its value. A cut axis makes a 3% difference look like a doubling.

How do I make a bar graph from an Excel table?

In Excel, select the table including its header row and choose a column or bar chart from the Insert tab; each numeric column becomes a series. Or copy the same cells and paste them here: the header row names the series, and several numeric columns become grouped or stacked bars you can download as PNG or SVG.

Changelog

Update history

New features, fixes and data refreshes for this tool, newest first.

  1. · v1.0

    LaunchedFirst release.

Missing something or found an error? Tell us — requests that come up often go into the next update. All tool updates

Next step

Stop rebuilding the same chart every week

Connect your site or app once and the traffic, funnel and retention charts build themselves from live data.

Start freeProduct analytics
Funnel calculatorStep conversion and drop-off with the biggest leak highlighted. Cohort analysisTurn sign-up and activity data into a retention triangle. Attribution modelsSee how credit moves between channels under six models.

See your data clearly. Find your growth.

Every click, backed by data. Install one line of code and see your first numbers in a minute.

Start free See a live demo

No credit card · Free plans for analytics and chat · Cookieless analytics