LineChartbeta

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

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

Single trend

One series over an ordered axis. Points mark each value; the axis frames the data range.

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 frames the data to emphasise variation. Set includeZero to anchor it 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>

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

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`	Height property for the LineChart component
`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.
`slotClasses`	`ChartSlotClasses`	—	Per-slot class overrides.
`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.
ChartSlotClasses	type	helper	1	Per-slot class overrides for the charts family.
ChartSlot	type	helper	0	Union of chart slot names (kept in sync with `chartVariants`).

06 Installation

Import

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

llm.txt