# Bar chart in Figma

> The default for comparing values across categories

Bars encode value as length from a common baseline, which is the comparison humans read most accurately. If you are unsure which chart to use and your data is categorical, the answer is almost always a bar chart. Vertical bars (columns) suit few categories and short labels; horizontal bars suit many categories and long ones.

## Available in 5 of 5 chart libraries

| Library | Ready-made examples |
| --- | --- |
| Google Charts | 8 |
| Highcharts | 16 |
| D3 · Nivo | 18 |
| ApexCharts | 9 |
| ECharts | 46 |

97 examples in total.

These are the real charting libraries running inside the plugin, not redrawn lookalikes. The bar chart on your canvas is the library's own output, and the Export tab hands developers that same library's configuration plus React, Vue, Angular or Svelte code — so what you design is what gets built.

## Reach for it when

- Comparing a single measure across a handful of named categories.
- Category labels are long — go horizontal and they stay readable.
- You need people to read exact differences rather than an overall impression.

## Use something else when

- The categories are stages of a continuous variable — use a histogram.
- You have more than about twenty categories and no way to sort or filter them.

## The data it needs

One column of category names, then one column per series.

| Category | 2024 | 2025 |
| --- | --- | --- |
| Alpha | 120 | 145 |
| Beta | 80 | 96 |
| Gamma | 45 | 61 |

---

Install Figma Charts: https://www.figma.com/community/plugin/1345221583582136577/figma-charts

All chart types: https://systergon.com/figma-charts/chart-types