Examples · Bar chart

Bar chart examples

Every bar graph example on this page is drawn live by the engine, not a screenshot — hover a bar to read it, flip the site theme and the chart follows. Copy any spec below and it renders the same anywhere.

When to use it

  • Comparing amounts across a handful of categories — sales by region, answers by option, signups by channel
  • Ranking: sorted bars read as a leaderboard at a glance
  • Showing one measure per category when exact position matters more than trend

Not the right shape?

Change over time with many points — a line graph keeps the trend readable where twenty bars become a fence.

Real-world examples

Horizontal bars

Laid on their side, bars read as a ranked list — the eye runs straight down the leaderboard, label beside each bar.

Open in maker with this data

View the spec 
{
  "type": "bar",
  "theme": "mint",
  "title": "How students get to school",
  "source": "One school's survey, 214 answers",
  "data": {
    "labels": [
      "Walk",
      "Bus",
      "Car",
      "Bike",
      "Transit"
    ],
    "series": [
      {
        "name": "Students",
        "values": [
          71,
          58,
          44,
          24,
          17
        ]
      }
    ]
  }
}

Grouped columns

Two series side by side compare this year against last, and the currency format labels every bar in dollars.

Open in maker with this data

View the spec 
{
  "type": "column",
  "theme": "ink",
  "title": "Revenue by quarter",
  "source": "Finance, unaudited",
  "options": {
    "format": "currency:USD"
  },
  "data": {
    "labels": [
      "Q1",
      "Q2",
      "Q3",
      "Q4"
    ],
    "series": [
      {
        "name": "This year",
        "values": [
          48000,
          52000,
          47000,
          61000
        ]
      },
      {
        "name": "Last year",
        "values": [
          39000,
          42000,
          40000,
          53000
        ]
      }
    ]
  }
}

Columns with a goal line

options.target draws a dashed reference across the chart — the days that cleared the goal are obvious without reading a single number.

Open in maker with this data

View the spec 
{
  "type": "column",
  "theme": "editorial",
  "title": "Store visits vs daily goal",
  "source": "Door counter, this week",
  "options": {
    "target": {
      "value": 120,
      "label": "Goal"
    }
  },
  "data": {
    "labels": [
      "Mon",
      "Tue",
      "Wed",
      "Thu",
      "Fri",
      "Sat"
    ],
    "series": [
      {
        "name": "Visits",
        "values": [
          104,
          131,
          98,
          126,
          142,
          167
        ]
      }
    ]
  }
}

Bar chart vs column chart

Same data, two orientations. A column chart stands its bars upright, which suits short labels and time-like categories; a bar chart lays them sideways, which gives long labels room to breathe. Most tools — this one included — treat the two as one family and let you flip between them.

Column — upright
Bar — horizontal
Open this chart in a maker Bar graph maker from scratch

Questions people ask

What is the difference between a bar chart and a column chart?

Orientation. Columns are vertical bars; bar charts run horizontally. Horizontal bars earn their keep when category names are long — 'Public transit' fits beside a bar but not under a column. The data model is identical, which is why this engine morphs between the two instead of redrawing.

What is a bar chart best used for?

Comparing a measured amount across discrete categories, especially when you want readers to judge exact differences. Bars share a common baseline, and length along a common baseline is the comparison human eyes judge most accurately.

How do I make my own bar chart?

Open the bar graph maker, paste rows like 'Search, 132' (or columns straight from a spreadsheet), and the chart updates as you type. Export it as an embed snippet, PNG, SVG, or a share link — nothing you paste leaves your browser.