# Bars vs horizontal bars

> Two ways to compare amounts.

**Short answer.** Use vertical bars for a few items or for periods of time, read left to right. Use horizontal bars when names are long or there are many items, so the list reads top to bottom.

Updated Nov 2, 2026 · Logistics sample data

## 001 · Bars

Eight hubs as columns: the names have to be short.

Parcels per hub, columns. Parcels delivered at eight hubs in September 2026: Rotterdam 1,312, Antwerp 1,046, Hamburg 1,034, Milan 655, Lyon 598, Gdansk 512, Brno 438, Porto 401.

| Hub | Parcels |
| --- | --- |
| Rotterdam | 1,312 |
| Antwerp | 1,046 |
| Hamburg | 1,034 |
| Milan | 655 |
| Lyon | 598 |
| Gdansk | 512 |
| Brno | 438 |
| Porto | 401 |

## 007 · Horizontal bars

The same hubs as rows, sorted: Rotterdam leads with 1,312.

Parcels per hub, rows. Parcels delivered at eight hubs in September 2026: Rotterdam 1,312, Antwerp 1,046, Hamburg 1,034, Milan 655, Lyon 598, Gdansk 512, Brno 438, Porto 401.

**Same 8 hubs.** Both rank the same numbers. The rows give every name its full length and read like a list; the columns fit a wide, short card. Rotterdam delivers three times as many parcels as Porto (1,312 against 401).

## If you ask

| Question | Use a |
| --- | --- |
| Are the items months or weeks? | Bars |
| Are the names long? | Horizontal bars |
| Are there more than ten items? | Horizontal bars |
| Is the card wide and short? | Bars |

## Bars and Horizontal bars compared

|  | Bars | Horizontal bars |
| --- | --- | --- |
| Answers | Which item or period is biggest | Which items lead a ranked list |
| Shows | Columns, left to right | Rows, top to bottom |
| Best when | Periods, a few items | Long names, many items, rankings |
| Avoid when | Names are long | The items are periods of time |
| Data shape | One value per item | One value per item |

## Common mistakes

### Bars

- **Long names on a slant.** Tilted labels are hard to read. Turn the chart sideways.
- **Too many columns.** Past about twelve, bars turn into a comb.

### Horizontal bars

- **Time running down the page.** Readers expect time left to right.
- **Rows in random order.** Sort by value unless the order means something.

## Other ways to show it

- [009 · Lollipop](https://usechartory.com/charts/lollipop): Compare items · Fintech data
- [008 · Bullet](https://usechartory.com/charts/bullet): Compare items · E-commerce data
- [066 · Dumbbell](https://usechartory.com/charts/dumbbell): Compare items · E-commerce data

## Bars, horizontal bars and the other 130 types.

In Figma and React, in four sizes, light and dark. Pay once, every update. [See plans](https://usechartory.com/pricing). [Bars type page](https://usechartory.com/charts/bars) · [Horizontal bars type page](https://usechartory.com/charts/horizontal-bars)

## Questions

### Is a horizontal bar chart the same as a bar chart?

Yes, turned sideways. Some call vertical bars a column chart.

### Which one ranks better?

Horizontal bars: a sorted list reads top to bottom.

### Do both come in every size?

Yes. Bars and Horizontal bars come in XS, S, M and L, each laid out again for its size, in light and dark.

### Do they install the same way?

Yes, one command each: npx shadcn add @chartory/bars and npx shadcn add @chartory/horizontal-bars.

## More comparisons

- [Stacked vs grouped bars](https://usechartory.com/compare/stacked-vs-grouped-bars)
- [Treemap vs sunburst](https://usechartory.com/compare/treemap-vs-sunburst)
- [Donut vs semi donut](https://usechartory.com/compare/donut-vs-semi-donut)
- [Histogram vs box plot](https://usechartory.com/compare/histogram-vs-box-plot)

Still not sure? Start from what the chart has to show. [Open the Chart Chooser](https://usechartory.com/chooser)