Line chart

Two series

Lines compare series without filling under them.

ChartModel {
    kind: ChartKind::Line,
    series: vec![
        Series {
            name: "Agents".into(),
            values: vec![30.0, 34.0, 33.0, 41.0, 44.0, 22.0, 20.0],
            hue: 1,
        },
        Series {
            name: "People".into(),
            values: vec![12.0, 17.0, 14.0, 22.0, 14.0, 9.0, 7.0],
            hue: 2,
        },
    ],
    x_ticks: days(),
    title: Some("Resolved by".into()),
}

One series

A single trend over the week.

ChartModel {
    kind: ChartKind::Line,
    series: vec![
        Series {
            name: "First reply (min)".into(),
            values: vec![6.0, 5.0, 5.5, 4.0, 4.5, 3.0, 3.5],
            hue: 3,
        },
    ],
    x_ticks: days(),
    title: Some("Median first reply".into()),
}

Three series

Hues one to five pick the theme's chart colours.

ChartModel {
    kind: ChartKind::Line,
    series: vec![
        Series {
            name: "Email".into(),
            values: vec![20.0, 24.0, 22.0, 30.0, 28.0, 14.0, 12.0],
            hue: 1,
        },
        Series {
            name: "Chat".into(),
            values: vec![10.0, 12.0, 15.0, 13.0, 18.0, 9.0, 8.0],
            hue: 2,
        },
        Series {
            name: "Phone".into(),
            values: vec![5.0, 6.0, 4.0, 7.0, 6.0, 2.0, 1.0],
            hue: 3,
        },
    ],
    x_ticks: days(),
    title: Some("Tickets by channel".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 lands = Series { name: "Lands".into(), values: vec![3.0, 5.0, 4.0], hue: 1 };
ChartModel { kind: ChartKind::Line, series: vec![lands], x_ticks: vec!["Mon".into(), "Tue".into(), "Wed".into()], title: Some("Lands this week".into()) }

use ocean_ui_native::{Show, charts::AreaChart, egui::Id};
AreaChart { model: &model, range_label: Some("24 h"), id: Id::unique(("gallery.chart", true)), 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.
• Each x position carries a title with its label and every series' value, shown on hover over its band.
• The axis labels are aria-hidden, the legend is the figure's figcaption, and the draw-in does not run under reduced motion.

Related

• Area chart
• Bar chart
• KPI

Markdown

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

# Line chart

A chart of one or more series as 2 px lines over x labels, with axes, tooltips and a legend.

A line chart shows how one or more series move across the same x labels, each as a 2 px line that draws in, with ringed points while a series has 31 or fewer. It is the area chart without the fill; on the native face the same AreaChart draws both. 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 lands = Series { name: "Lands".into(), values: vec![3.0, 5.0, 4.0], hue: 1 };
ChartModel { kind: ChartKind::Line, series: vec![lands], x_ticks: vec!["Mon".into(), "Tue".into(), "Wed".into()], title: Some("Lands this week".into()) }
```

Native:

```rust
use ocean_ui_native::{Show, charts::AreaChart, egui::Id};
AreaChart { model: &model, range_label: Some("24 h"), id: Id::unique(("gallery.chart", true)), 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` | `—` | Line: every series a line, none filled. |
| `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 x 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: ![Line chart, dark](/ui/native/line-dark.png) ![Line chart, light](/ui/native/line-light.png)

## Examples

### Two series

Lines compare series without filling under them.

```rust
ChartModel {
    kind: ChartKind::Line,
    series: vec![
        Series {
            name: "Agents".into(),
            values: vec![30.0, 34.0, 33.0, 41.0, 44.0, 22.0, 20.0],
            hue: 1,
        },
        Series {
            name: "People".into(),
            values: vec![12.0, 17.0, 14.0, 22.0, 14.0, 9.0, 7.0],
            hue: 2,
        },
    ],
    x_ticks: days(),
    title: Some("Resolved by".into()),
}
```

### One series

A single trend over the week.

```rust
ChartModel {
    kind: ChartKind::Line,
    series: vec![
        Series {
            name: "First reply (min)".into(),
            values: vec![6.0, 5.0, 5.5, 4.0, 4.5, 3.0, 3.5],
            hue: 3,
        },
    ],
    x_ticks: days(),
    title: Some("Median first reply".into()),
}
```

### Three series

Hues one to five pick the theme's chart colours.

```rust
ChartModel {
    kind: ChartKind::Line,
    series: vec![
        Series {
            name: "Email".into(),
            values: vec![20.0, 24.0, 22.0, 30.0, 28.0, 14.0, 12.0],
            hue: 1,
        },
        Series {
            name: "Chat".into(),
            values: vec![10.0, 12.0, 15.0, 13.0, 18.0, 9.0, 8.0],
            hue: 2,
        },
        Series {
            name: "Phone".into(),
            values: vec![5.0, 6.0, 4.0, 7.0, 6.0, 2.0, 1.0],
            hue: 3,
        },
    ],
    x_ticks: days(),
    title: Some("Tickets by channel".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.
- Each x position carries a title with its label and every series' value, shown on hover over its band.
- The axis labels are aria-hidden, the legend is the figure's figcaption, and the draw-in does not run under reduced motion.

## Related

- [Area chart](/ui/components/area.md)
- [Bar chart](/ui/components/bar.md)
- [KPI](/ui/components/kpi.md)