# Bar chart

> Grouped, stacked, 100% stacked, horizontal and negative bars.

Source: https://82chart.com/en/docs/bar/

`type: 'bar'` puts several series side by side. Bars are rounded at the value end (`barRadius`, default 6) and square at the baseline. Hovering highlights the whole band and lists every value in it.

```js
createChart('#chart', {
  type: 'bar',
  title: 'Quarterly revenue',
  prefix: '$',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      { name: '2025', data: [182000, 205000, 198000, 241000] },
      { name: '2026', data: [214000, 236000, 251000, null] },
    ],
  },
});
```

## Stacks and totals

`stacked: true` piles every bar series into one stack and `stackTotals: true` writes the total on top. Give series a `stack: 'name'` to make several stacks.

```js
createChart('#chart', {
  type: 'bar',
  title: 'Sign-ups by age',
  stacked: true,
  stackTotals: true,
  data: {
    labels: ['Teens', '20s', '30s', '40s', '50+'],
    series: [
      { name: 'Women', data: [820, 4210, 3880, 2140, 960] },
      { name: 'Men', data: [640, 3650, 4120, 2530, 1180] },
    ],
  },
});
```

## Horizontal bars (rankings)

Long names and rankings (top 10 products) read better with `horizontal: true`. Sort largest first. `dataLabels: true` writes the value at the end of each bar.

```js
createChart('#chart', {
  type: 'bar',
  horizontal: true,
  title: 'Best sellers',
  dataLabels: true,
  data: {
    labels: ['Wireless earbuds', 'Power bank 10000mAh', 'USB-C cable', 'Phone stand', 'Laptop sleeve'],
    series: [{ name: 'Units', data: [1840, 1520, 1310, 980, 760] }],
  },
});
```

## 100% stacked

`stacked: 'percent'` makes every band add up to 100%, for survey answers and other shares.

## Negative values

Negative bars go below the zero line. `negativeColor` colors them, or `palette: 'korea'` uses red for up and blue for down, as Korean stock apps do.

```js
createChart('#chart', {
  type: 'bar',
  title: 'Change from last month',
  unit: '%',
  palette: 'korea',
  data: {
    labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
    series: [{ name: 'Change', data: [4.2, -1.8, 6.5, -3.1, 2.4, 8.9] }],
  },
});
```

| Option | Default | What it does |
| --- | --- | --- |
| `horizontal` | false | Horizontal bars |
| `stacked` | false | `true` or `'percent'` |
| `stackTotals` | false | Total above stacked bars |
| `dataLabels` | false | Value at the bar end (`true` or `'end'`) |
| `barRadius` | 6 | Corner radius at the value end (px) |
| `barWidth` | 0.82 (0.78 grouped) | Share of the band a bar group fills (0–1) |
| `negativeColor` | - | Color of bars below zero |
| `gradient` | true | Soft vertical gradient |