Bar chart

Per category

Counts per category, at most sixteen on an axis.

ChartModel {
    kind: ChartKind::Bar,
    series: vec![
        Series {
            name: "Spend".into(),
            values: vec![820.0, 640.0, 1210.0, 380.0],
            hue: 3,
        },
    ],
    x_ticks: ["Models", "Search", "Storage", "Email"].map(String::from).to_vec(),
    title: Some("Spend by service".into()),
}

Grouped

Two series side by side per category.

ChartModel {
    kind: ChartKind::Bar,
    series: vec![
        Series { name: "Closed".into(), values: vec![31.0, 44.0, 52.0], hue: 1 },
        Series { name: "Handed off".into(), values: vec![4.0, 6.0, 3.0], hue: 2 },
    ],
    x_ticks: ["08:00", "09:00", "10:00"].map(String::from).to_vec(),
    title: Some("Closed per hour".into()),
}

Per day

A week of counts.

ChartModel {
    kind: ChartKind::Bar,
    series: vec![
        Series {
            name: "Runs".into(),
            values: vec![120.0, 140.0, 132.0, 160.0, 151.0, 60.0, 48.0],
            hue: 1,
        },
    ],
    x_ticks: days(),
    title: Some("Agent runs per day".into()),
}

On the Mac

The same vocabulary drawn by Ocean UI's native face (egui on Metal), as the gallery's snapshot.

Use it

use ocean_ui_core::chart::{ChartKind, ChartModel, Series};
let deploys = Series { name: "Deploys".into(), values: vec![4.0, 7.0, 3.0], hue: 2 };
ChartModel { kind: ChartKind::Bar, series: vec![deploys], x_ticks: vec!["Mon".into(), "Tue".into(), "Wed".into()], title: Some("Deploys per day".into()) }

use ocean_ui_native::{Show, charts::BarChart, egui::Id};
BarChart { model: &model, range_label: None, id: Id::unique("gallery.bar"), height: 220.0 }.show(ui)

Cargo feature charts of ocean-ui-core, ocean-ui-web and ocean-ui-native; available since 2026-10-29.

In App UI, the chart block draws it from YAML.

Props

Accessibility

• The SVG is role="img" with the title as its aria-label, or Chart when there is none, so give every chart a title.
• Every bar carries a title with its x label and every series' value, shown on hover.
• The axis labels are aria-hidden, the legend is the figure's figcaption, and the bars do not grow under reduced motion.

Related

• Line chart
• Donut
• KPI

Markdown

The same page as Markdown, for an agent or a pull request.

# Bar chart

A chart of values in bands, one per x label, with the series' bars side by side, tooltips and a legend.

A bar chart compares values across bands, one band per x label, with each series' bar side by side in the band's middle 64 percent. The bars grow from the baseline as the chart appears, and the x labels sit one per band and wrap inside it. Each series takes one of the theme's five chart hues; a legend appears for two series or more, and a chart with no values says No data yet.

## Use it

Web:

```rust
use ocean_ui_core::chart::{ChartKind, ChartModel, Series};
let deploys = Series { name: "Deploys".into(), values: vec![4.0, 7.0, 3.0], hue: 2 };
ChartModel { kind: ChartKind::Bar, series: vec![deploys], x_ticks: vec!["Mon".into(), "Tue".into(), "Wed".into()], title: Some("Deploys per day".into()) }
```

Native:

```rust
use ocean_ui_native::{Show, charts::BarChart, egui::Id};
BarChart { model: &model, range_label: None, id: Id::unique("gallery.bar"), height: 220.0 }.show(ui)
```

Cargo feature `charts`; since 2026-10-29.
In App UI the `chart` block draws it ([chart](/ui/blocks/chart.md)).

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `kind` | `ChartKind` | `—` | Bar: the series side by side in each band. |
| `series` | `Vec<Series>` | `—` | The runs of values, each a Series { name, values: Vec<f64>, hue: u8 } whose hue 1 to 5 picks a chart colour. |
| `x_ticks` | `Vec<String>` | `—` | The band labels, one per value; a missing one shows its position, counted from 1. |
| `title` | `Option<String>` | `None` | The chart's accessible name, Chart when absent. |

On the Mac: ![Bar chart, dark](/ui/native/bar-dark.png) ![Bar chart, light](/ui/native/bar-light.png)

## Examples

### Per category

Counts per category, at most sixteen on an axis.

```rust
ChartModel {
    kind: ChartKind::Bar,
    series: vec![
        Series {
            name: "Spend".into(),
            values: vec![820.0, 640.0, 1210.0, 380.0],
            hue: 3,
        },
    ],
    x_ticks: ["Models", "Search", "Storage", "Email"].map(String::from).to_vec(),
    title: Some("Spend by service".into()),
}
```

### Grouped

Two series side by side per category.

```rust
ChartModel {
    kind: ChartKind::Bar,
    series: vec![
        Series { name: "Closed".into(), values: vec![31.0, 44.0, 52.0], hue: 1 },
        Series { name: "Handed off".into(), values: vec![4.0, 6.0, 3.0], hue: 2 },
    ],
    x_ticks: ["08:00", "09:00", "10:00"].map(String::from).to_vec(),
    title: Some("Closed per hour".into()),
}
```

### Per day

A week of counts.

```rust
ChartModel {
    kind: ChartKind::Bar,
    series: vec![
        Series {
            name: "Runs".into(),
            values: vec![120.0, 140.0, 132.0, 160.0, 151.0, 60.0, 48.0],
            hue: 1,
        },
    ],
    x_ticks: days(),
    title: Some("Agent runs per day".into()),
}
```

## Accessibility

- The SVG is role="img" with the title as its aria-label, or Chart when there is none, so give every chart a title.
- Every bar carries a title with its x label and every series' value, shown on hover.
- The axis labels are aria-hidden, the legend is the figure's figcaption, and the bars do not grow under reduced motion.

## Related

- [Line chart](/ui/components/line.md)
- [Donut](/ui/components/donut.md)
- [KPI](/ui/components/kpi.md)