Skip to main content
Urbicon UI
source

LineChartbeta

Line chart for trends over an ordered category axis, one path per series.

Playground

Visitors — Mon: 120Visitors — Tue: 180Visitors — Wed: 150Visitors — Thu: 210Visitors — Fri: 240Visitors — Sat: 190Visitors — Sun: 160Signups — Mon: 80Signups — Tue: 96Signups — Wed: 110Signups — Thu: 130Signups — Fri: 160Signups — Sat: 140Signups — Sun: 120
  • Visitors
  • Signups
Line chart: 7 points, 2 series
CategoryVisitorsSignups
Mon12080
Tue18096
Wed150110
Thu210130
Fri240160
Sat190140
Sun160120
Loading syntax highlighting...

01 Examples

Single trend

One series over an ordered axis. Points mark each value; the axis frames the data range.
Series 1 — Jan: 12Series 1 — Feb: 19Series 1 — Mar: 9Series 1 — Apr: 22Series 1 — May: 27Series 1 — Jun: 24
Line chart: 6 points
CategorySeries 1
Jan12
Feb19
Mar9
Apr22
May27
Jun24
Loading syntax highlighting...

Multiple series

Each value column becomes its own line on the categorical palette; the legend appears automatically.
Visitors — Mon: 120Visitors — Tue: 180Visitors — Wed: 150Visitors — Thu: 210Visitors — Fri: 240Signups — Mon: 80Signups — Tue: 96Signups — Wed: 110Signups — Thu: 130Signups — Fri: 160
  • Visitors
  • Signups
Line chart: 5 points, 2 series
CategoryVisitorsSignups
Mon12080
Tue18096
Wed150110
Thu210130
Fri240160
Loading syntax highlighting...

Zero baseline

By default the value axis frames the data to emphasise variation. Set `includeZero` to anchor it at zero when absolute magnitude matters.
Line chart: 6 points
CategorySeries 1
Jan12
Feb19
Mar9
Apr22
May27
Jun24
Loading syntax highlighting...

02 Customization

Custom colors

Override per-series colors with any CSS color or design token.
Visitors — Mon: 120Visitors — Tue: 180Visitors — Wed: 150Visitors — Thu: 210Visitors — Fri: 240Signups — Mon: 80Signups — Tue: 96Signups — Wed: 110Signups — Thu: 130Signups — Fri: 160
  • Visitors
  • Signups
Line chart: 5 points, 2 series
CategoryVisitorsSignups
Mon12080
Tue18096
Wed150110
Thu210130
Fri240160
Loading syntax highlighting...

03 Accessibility

SVG with role="img"

The SVG carries role="img" with a generated aria-label; pass ariaLabel to describe the trend in domain terms.

Data-table fallback

A visually hidden table mirrors every point per series, so screen-reader users read exact values rather than an inaccessible path.

Per-point tooltips

Each point dot includes a native <title> with its series, category, and value.

04 API Reference

17 props
17 props 1 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt