Lily Design System™

LineChart

A continuous-data visualization that connects ordered points with line segments, emphasising the shape of the trend rather than its magnitude. The standard choice for showing change over time — temperatures, prices, response times — and for comparing the trend of multiple series side by side.

The component is a headless wrapper around an inline <svg>: it renders a <figure role="img"> containing the chart, names the figure via aria-label (from label), and references an extended description and an optional dataTable slot via aria-describedby. The data table is the canonical accessible alternative — screen readers and exports both benefit from a real <table> rendering of the same numbers, and Lily encourages always providing it.

When the cumulative magnitude beneath the line matters more than the shape, use AreaChart. For categorical comparison use BarChart or ColumnChart. For tiny inline trends use Sparkline.

Example

LineChart
Show demo markup 
<div class="line-chart" aria-label="a line chart visualization connecting data points to display data">LineChart</div>
Usage example 
<LineChart label="CPU usage over time" series={cpuSeries} description="CPU% over the last hour" />
Show Svelte source 
// In your Svelte component:
import LineChart from "lily-design-system-svelte-headless/components/LineChart/LineChart.svelte";

<LineChart>
  <!-- content -->
</LineChart>

Usage

<LineChart label="CPU usage over time" series={cpuSeries} description="CPU% over the last hour" />

Props

PropTypeDefaultDescription
labelstring (required)—Accessible name
descriptionstring—Extended description
seriesarray of series[]Each series is { name: string; points: { x: number; y: number }[] }
dataTableslot—Optional fallback <table>
...restPropsHTML attributes—Spread onto the root <figure>

Keyboard Interactions

  • No keyboard interactions on the rendered lines
  • Data table (when rendered) follows native table keyboard behaviour

ARIA

  • role="img" exposes the chart as a single image
  • aria-label and aria-describedby provide the accessible name and description

When to Use

  • Showing trends over time, especially when only the line shape (not magnitude under it) matters
  • Comparing multiple series of continuous data

When Not to Use

  • Use AreaChart to emphasise magnitude (area under the line)
  • Use BarChart or ColumnChart for discrete categorical comparisons
  • Use Sparkline for tiny inline trends

Headless

This headless component renders semantic HTML with appropriate ARIA wiring. The consumer provides all visual styling — no CSS, animations, or layout assumptions are baked in.

Styles

The component renders with .line-chart as the root class. No default styles are included.

Related components

  • area-chart — area under the line
  • scatter-chart — relationship between two variables
  • bar-chart / column-chart — categorical alternatives
  • sparkline — inline tiny trend
  • graphic-block — chart wrapper with title/notes

References

Implementation Notes

  • Renders a <figure role="img"> containing an inline <svg> rendering of one or more line series
  • Data is supplied as series (each a sequence of { x, y } points)
  • Lines are interpolated between points; markers are optional
  • An optional accessible data table is rendered via the dataTable slot
  • Spreads restProps onto the root <figure>

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: line-chart
  • PascalCase: LineChart
  • Description: a line chart visualization connecting data points to display data
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <figure>
  • CSS class: .line-chart
  • Interactive: no

ARIA

  • role="img" exposes the chart as a single image
  • aria-label and aria-describedby provide the accessible name and description

Keyboard

  • No keyboard interactions on the rendered lines
  • Data table (when rendered) follows native table keyboard behaviour

Props

  • label: string (required) (default: —) — Accessible name
  • description: string (default: —) — Extended description
  • series: array of series (default: []) — Each series is { name: string; points: { x: number; y: number }[] }
  • dataTable: slot (default: —) — Optional fallback <table>
  • ...restProps: HTML attributes (default: —) — Spread onto the root <figure>