LineChartbeta

Line chart for trends over an ordered category axis.

Playground

Visitors
Signups

Line chart: 7 points, 2 series
Category	Visitors	Signups
Mon	120	80
Tue	180	96
Wed	150	110
Thu	210	130
Fri	240	160
Sat	190	140
Sun	160	120

Show points

Show legend

Show grid

Include zero

Height (px)

<script lang="ts">
  import { LineChart } from '@urbicon-ui/blocks';

  const data = [
    { label: 'Mon', values: [120, 80] },
    { label: 'Tue', values: [180, 96] },
    { label: 'Wed', values: [150, 110] },
    { label: 'Thu', values: [210, 130] },
    { label: 'Fri', values: [240, 160] },
    { label: 'Sat', values: [190, 140] },
    { label: 'Sun', values: [160, 120] }
  ];
  const series = [{ label: 'Visitors' }, { label: 'Signups' }];
</script>

<LineChart
  {data}
  {series}
  height={260}
/>

01 Examples

Each datum has a label and a values array, and values[i] belongs to series[i]. Pass series to name and colour the lines and to drive the legend; a single value per datum needs no series.

Single trend

One series over an ordered axis.

Line chart: 6 points
Category	Series 1
Jan	12
Feb	19
Mar	9
Apr	22
May	27
Jun	24

<div class="w-full max-w-2xl">
  <LineChart data={single} />
</div>

Multiple series

Each value column becomes its own line on the categorical palette; the legend appears automatically.

Visitors
Signups

Line chart: 5 points, 2 series
Category	Visitors	Signups
Mon	120	80
Tue	180	96
Wed	150	110
Thu	210	130
Fri	240	160

<div class="w-full max-w-2xl">
  <LineChart data={weekly} {series} />
</div>

Zero baseline

By default the value axis fits the data range. Set includeZero to anchor the axis at zero when absolute magnitude matters.

Line chart: 6 points
Category	Series 1
Jan	12
Feb	19
Mar	9
Apr	22
May	27
Jun	24

<div class="w-full max-w-2xl">
  <LineChart includeZero showPoints={false} data={single} />
</div>

02 Customization

Custom colors

Override per-series colors with any CSS color or design token.

Visitors
Signups

Line chart: 5 points, 2 series
Category	Visitors	Signups
Mon	120	80
Tue	180	96
Wed	150	110
Thu	210	130
Fri	240	160

<div class="w-full max-w-2xl">
  <LineChart
    data={weekly}
    series={[
      { label: 'Visitors', color: 'var(--color-primary)' },
      { label: 'Signups', color: 'var(--color-success)' }
    ]}
  />
</div>

Line and points apart

slotClasses.mark is the line, slotClasses.point the dots on it — here the line fades back while the dots keep full strength and take a surface-coloured ring.

Line chart: 6 points
Category	Series 1
Jan	12
Feb	19
Mar	9
Apr	22
May	27
Jun	24

<div class="w-full max-w-2xl">
  <LineChart
    data={single}
    slotClasses={{ mark: 'opacity-30', point: 'stroke-surface-base stroke-[2px]' }}
  />
</div>

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 the exact values.

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

Prop	Type	Default	Description
`data` required	`CartesianDatum[]`	—	Ordered categories with per-series values.
`ariaLabel`	`string`	—	Accessible label; a summary is generated when omitted.
`class`	`string`	—	Extra classes merged onto the wrapper.
`formatValue`	`(value: number) => string`	—	Format values for axis labels, tooltips, and the data table.
`height`	`number`	`240`	SVG height in px.
`includeZero`	`boolean`	`false`	Start the value axis at zero instead of framing the data range.
`locale`	`string`	—	BCP-47 locale for the default number formatter.
`margin`	`ChartMargin`	—	Plot margins; merged over the defaults.
`preset`	`string`	—	Apply a named preset registered on `<BlocksProvider>`.
`series`	`ChartSeries[]`	—	Series metadata (labels + colors); defaults to one per value column.
`showGrid`	`boolean`	`true`	Render horizontal gridlines.
`showLegend`	`boolean`	`true`	Show the series legend (only renders with >1 series).
`showPoints`	`boolean`	`true`	Render a dot at each data point; style them via `slotClasses.point`.
`slotClasses`	`LineChartSlotClasses`	—	Per-slot class overrides. `mark` is the line path — one per series — and `point` the dots on it, one per series and datum.
`unstyled`	`boolean`	—	Remove all default tv classes.
`width`	`number`	—	Fixed width in px; omit for responsive width.
`...HTMLAttributes<HTMLElement>` inherited	`HTMLAttributes`	—	HTML attributes (excluding: 'children')

05 Types

Local type definitions used by this component.

6 types

Only referenced

Name	Kind	Category	Used by	Description
LineChartProps	interface	props	0	—
CartesianDatum	interface	helper	1	One category (x-axis tick) with one value per series — shared by the cartesian charts.
ChartMargin	interface	helper	1	Plot margins (px). Any omitted side falls back to the frame default.
ChartSeries	interface	helper	1	A data series shared across the cartesian charts.
LineChartSlotClasses	type	helper	1	Per-slot class overrides for `<LineChart>`.
LineChartSlot	type	helper	0	Slots `<LineChart>` paints.

06 Installation

Import

import { LineChart } from '@urbicon-ui/blocks';

llm.txt