# Bar chart

> A vertical bar chart with labels. A native Pyzed component for Python desktop GUIs, with a live preview, code examples and its API.

Source: https://albakore.github.io/pyzed/library/bar-chart/

:::tip[In plain words]
A chart of bars to compare a few amounts.
:::

A vertical bar chart drawn with `pz.canvas` in the theme colors, with optional labels under the bars.

`ui.bar_chart` · Category: [Data](https://albakore.github.io/pyzed/library/#data) · [Full reference →](https://albakore.github.io/pyzed/reference/ui/#bar_chart)

**Code:**

```python
ui.bar_chart([12, 19, 8, 15, 22, 17, 9], labels=["M", "T", "W", "T", "F", "S", "S"],
             width=360, height=180)
```

## When to use

- To compare a handful of values side by side (per day, per category).

## Usage

```python
from pyzed import ui

ui.bar_chart([12, 19, 8, 15, 22, 17, 9], labels=["M", "T", "W", "T", "F", "S", "S"],
             width=360, height=180)
```

## Variants

:::note[About these captures]
Each capture is recorded by pyzed itself, off-screen at 2x, in One Dark or One Light to match this site's theme, and cropped to the component so it shows at its real size. The pointer hovers, presses or types into it; a component that does not react to the pointer cycles through a few themes. With reduced motion you see the first frame. Open **Code** under a capture to see the snippet that draws it; free names such as `on_save` stand for your own callbacks.
:::

### Options

```python
ui.bar_chart([12, 19, 8, 15, 22], labels=["M", "T", "W", "T", "F"], width=240, height=120)
```

```python
ui.bar_chart([4, 8, 6, 9, 3, 7, 5, 10], width=240, height=100)
```

```python
ui.bar_chart([5, 9, 7, 12], labels=["Q1", "Q2", "Q3", "Q4"], width=240, height=120, tint="success")
```

```python
ui.bar_chart([30, 12, 18], labels=["cpu", "io", "net"], width=240, height=120, tint="warning")
```

## Events

Bar chart has no events of its own: it shows what you give it. Like every widget it also has the **18 common events** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), attached with `.on(...)`: see [Events](https://albakore.github.io/pyzed/guides/events/) and [Events of every component](https://albakore.github.io/pyzed/library/events/).

## Properties and API

### `ui.bar_chart`

```python
bar_chart(values, *, labels=None, width=320, height=160, tint='accent', theme=None)
```

A vertical bar chart with optional labels.

| Property | Default | Description |
| --- | --- | --- |
| `values` | *required* | Values. |
| `labels` | `None` | Labels under each bar. |
| `width` | `320` | Width: pixels, `"fill"`, `"shrink"` or `"fill:N"` (proportion). |
| `height` | `160` | Height: pixels, `"fill"`, `"shrink"` or `"fill:N"` (proportion). |
| `tint` | `"accent"` | Semantic color: `"accent"`, `"error"`, `"warning"`, `"success"`, `"info"` or a token. |
| `theme` | `None` | Theme to use instead of the current one (`pyzed.theme.current()`). |

[Full reference →](https://albakore.github.io/pyzed/reference/ui/#bar_chart)

## Related

- [Donut](https://albakore.github.io/pyzed/library/donut/): A donut chart with a label in the middle.
- [Sparkline](https://albakore.github.io/pyzed/library/sparkline/): A tiny line chart for trends.
- [Stat](https://albakore.github.io/pyzed/library/stat/): A dashboard number with change and sparkline.