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

Chart maker · Line Line graph maker

Paste dates or periods in the first column and one column per series. Each line is labelled at its end, missing values leave a gap instead of a fake zero, and the y-axis fits the data.

  • 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.
Weekly sessions, this year vs lastSeries 1: Week 2,026, W1 3,200, W2 3,450, W3 3,300, W4 3,900, W5 4,150, W6 4,420, W7 4,380, W8 4,760; Series 2: Week 2,025, W1 2,900, W2 3,050, W3 3,100, W4 3,150, W5 3,300, W6 3,380, W7 3,500, W8 3,560Weekly sessions, this year vs lastSeries 1Series 2Week · Series 1: 2,026W1 · Series 1: 3,200W2 · Series 1: 3,450W3 · Series 1: 3,300W4 · Series 1: 3,900W5 · Series 1: 4,150W6 · Series 1: 4,420W7 · Series 1: 4,380W8 · Series 1: 4,760Week · Series 2: 2,025W1 · Series 2: 2,900W2 · Series 2: 3,050W3 · Series 2: 3,100W4 · Series 2: 3,150W5 · Series 2: 3,300W6 · Series 2: 3,380W7 · Series 2: 3,500W8 · Series 2: 3,560Series 1Series 201,0002,0003,0004,0005,000WeekW1W2W3W4W5W6W7W8
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 360" width="680" height="360" font-family="Inter,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,&quot;Noto Sans SC&quot;,system-ui,sans-serif" role="img" aria-label="Weekly sessions, this year vs last" style="display:block;max-width:100%;height:auto;margin:0 auto"><title>Weekly sessions, this year vs last</title><desc>Series 1: Week 2,026, W1 3,200, W2 3,450, W3 3,300, W4 3,900, W5 4,150, W6 4,420, W7 4,380, W8 4,760; Series 2: Week 2,025, W1 2,900, W2 3,050, W3 3,100, W4 3,150, W5 3,300, W6 3,380, W7 3,500, W8 3,560</desc><rect width="680" height="360" fill="#ffffff"/><text x="16" y="28" font-size="16" font-weight="700" fill="#0b0f19">Weekly sessions, this year vs last</text><rect x="16" y="46" width="10" height="10" rx="2" fill="#2050f0"/><text x="31" y="55" font-size="12" fill="#4b5563">Series 1</text><rect x="97" y="46" width="10" height="10" rx="2" fill="#eb6834"/><text x="112" y="55" font-size="12" fill="#4b5563">Series 2</text><path d="M55.46000000000001 330H609.1" stroke="#d1d5db" stroke-width="1"/><path d="M55.46000000000001 278H609.1" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 226H609.1" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 174H609.1" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 122H609.1" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 70H609.1" stroke="#e5e7eb" stroke-width="1"/><path d="M55.5 224.6L124.7 163.6L193.9 150.6L263.1 158.4L332.3 127.2L401.5 114.2L470.7 100.2L539.9 102.2L609.1 82.5" fill="none" stroke="#2050f0" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/><g><title>Week · Series 1: 2,026</title><circle cx="55.5" cy="224.6" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="55.5" cy="224.6" r="9" fill="transparent"/></g><g><title>W1 · Series 1: 3,200</title><circle cx="124.7" cy="163.6" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="124.7" cy="163.6" r="9" fill="transparent"/></g><g><title>W2 · Series 1: 3,450</title><circle cx="193.9" cy="150.6" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="193.9" cy="150.6" r="9" fill="transparent"/></g><g><title>W3 · Series 1: 3,300</title><circle cx="263.1" cy="158.4" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="263.1" cy="158.4" r="9" fill="transparent"/></g><g><title>W4 · Series 1: 3,900</title><circle cx="332.3" cy="127.2" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="332.3" cy="127.2" r="9" fill="transparent"/></g><g><title>W5 · Series 1: 4,150</title><circle cx="401.5" cy="114.2" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="401.5" cy="114.2" r="9" fill="transparent"/></g><g><title>W6 · Series 1: 4,420</title><circle cx="470.7" cy="100.2" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="470.7" cy="100.2" r="9" fill="transparent"/></g><g><title>W7 · Series 1: 4,380</title><circle cx="539.9" cy="102.2" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="539.9" cy="102.2" r="9" fill="transparent"/></g><g><title>W8 · Series 1: 4,760</title><circle cx="609.1" cy="82.5" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="609.1" cy="82.5" r="9" fill="transparent"/></g><path d="M55.5 224.7L124.7 179.2L193.9 171.4L263.1 168.8L332.3 166.2L401.5 158.4L470.7 154.2L539.9 148L609.1 144.9" fill="none" stroke="#eb6834" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/><g><title>Week · Series 2: 2,025</title><circle cx="55.5" cy="224.7" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="55.5" cy="224.7" r="9" fill="transparent"/></g><g><title>W1 · Series 2: 2,900</title><circle cx="124.7" cy="179.2" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="124.7" cy="179.2" r="9" fill="transparent"/></g><g><title>W2 · Series 2: 3,050</title><circle cx="193.9" cy="171.4" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="193.9" cy="171.4" r="9" fill="transparent"/></g><g><title>W3 · Series 2: 3,100</title><circle cx="263.1" cy="168.8" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="263.1" cy="168.8" r="9" fill="transparent"/></g><g><title>W4 · Series 2: 3,150</title><circle cx="332.3" cy="166.2" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="332.3" cy="166.2" r="9" fill="transparent"/></g><g><title>W5 · Series 2: 3,300</title><circle cx="401.5" cy="158.4" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="401.5" cy="158.4" r="9" fill="transparent"/></g><g><title>W6 · Series 2: 3,380</title><circle cx="470.7" cy="154.2" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="470.7" cy="154.2" r="9" fill="transparent"/></g><g><title>W7 · Series 2: 3,500</title><circle cx="539.9" cy="148" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="539.9" cy="148" r="9" fill="transparent"/></g><g><title>W8 · Series 2: 3,560</title><circle cx="609.1" cy="144.9" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="609.1" cy="144.9" r="9" fill="transparent"/></g><text x="617.1" y="86.5" font-size="11" font-weight="600" fill="#0b0f19">Series 1</text><text x="617.1" y="148.9" font-size="11" font-weight="600" fill="#0b0f19">Series 2</text><text x="47.5" y="334" text-anchor="end" font-size="11" fill="#6b7280">0</text><text x="47.5" y="282" text-anchor="end" font-size="11" fill="#6b7280">1,000</text><text x="47.5" y="230" text-anchor="end" font-size="11" fill="#6b7280">2,000</text><text x="47.5" y="178" text-anchor="end" font-size="11" fill="#6b7280">3,000</text><text x="47.5" y="126" text-anchor="end" font-size="11" fill="#6b7280">4,000</text><text x="47.5" y="74" text-anchor="end" font-size="11" fill="#6b7280">5,000</text><text x="55.5" y="348" text-anchor="start" font-size="11" fill="#4b5563">Week</text><text x="124.7" y="348" text-anchor="middle" font-size="11" fill="#4b5563">W1</text><text x="193.9" y="348" text-anchor="middle" font-size="11" fill="#4b5563">W2</text><text x="263.1" y="348" text-anchor="middle" font-size="11" fill="#4b5563">W3</text><text x="332.3" y="348" text-anchor="middle" font-size="11" fill="#4b5563">W4</text><text x="401.5" y="348" text-anchor="middle" font-size="11" fill="#4b5563">W5</text><text x="470.7" y="348" text-anchor="middle" font-size="11" fill="#4b5563">W6</text><text x="539.9" y="348" text-anchor="middle" font-size="11" fill="#4b5563">W7</text><text x="609.1" y="348" text-anchor="end" font-size="11" fill="#4b5563">W8</text></svg>

Version v1.0Updated Update history

Is a line chart right?

What data suits a line chart

A line connects points, which tells the reader “these values belong to one continuous quantity over time”. Use it when that is true.

Evenly spaced time

Days, weeks, months. If periods are missing, leave the cell empty: the line breaks rather than drawing a straight line across a gap.

One unit, one axis

Sessions and revenue on one chart need two axes, and two axes mislead. Make two charts, or index both to 100 at the start.

Two to four lines

Each is named at its end so you don’t need the legend. Past four, highlight one line and grey out the rest, or use small charts.

Not for categories

Channels or countries have no order between them; joining them with a line suggests a trend that isn’t there. Use bars.

The y-axis starts at zero when the data is close to it, and zooms in otherwise, so a 5% trend is visible. Bars never zoom.

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
How do I make a line graph with several lines?

Put each series in its own column, with the dates or periods in the first column. Each column becomes one line, named after its header.

What happens to empty cells?

The line breaks at the gap. Filling it with zero would draw a fake drop; drawing straight across would invent data.

Why doesn’t my line chart start at zero?

Lines show change, not size, so the axis fits the data when all values are far from zero. Lengths aren’t compared on a line, so this doesn’t distort.

Can I compare this year with last year?

Yes — that is the sample: one column per year, with weeks or months in the first column.

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