Lily Design System™

AreaChart

A continuous-data visualization where the area below a line is filled, emphasising the magnitude of values over time rather than just the shape of the trend. Use it when the cumulative size of the value matters — page views, revenue, energy consumption — particularly when comparing two or three stacked or overlaid series.

The component is a headless wrapper around an inline <svg>: it renders a <figure role="img"> with the chart inside, 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, users on text-only browsers, and exports all benefit from a real <table> rendering of the same numbers, and Lily encourages always providing it.

For trends without magnitude emphasis use LineChart; for categorical comparisons use BarChart or ColumnChart; for tiny inline trend marks use Sparkline.

Example

AreaChart
Show demo markup 
<div class="area-chart" aria-label="an area chart visualization showing sized components in continuous data">AreaChart</div>
Usage example 
<AreaChart label="Daily visits, last 30 days" series={visitSeries} description="Daily visit count for the past 30 days" />
Show Svelte source 
// In your Svelte component:
import AreaChart from "lily-design-system-svelte-headless/components/AreaChart/AreaChart.svelte";

<AreaChart>
  <!-- content -->
</AreaChart>

Usage

<AreaChart label="Daily visits, last 30 days" series={visitSeries} description="Daily visit count for the past 30 days" />

Props

PropTypeDefaultDescription
labelstring (required)—Accessible name for the chart
descriptionstring—Extended description (becomes a <figcaption> and is referenced via aria-describedby)
seriesarray of series[]Each series is { name: string; points: { x: number; y: number }[] }
dataTableslot—Optional fallback <table> summarising the data
...restPropsHTML attributes—Spread onto the root <figure>

Keyboard Interactions

  • No keyboard interactions on the rendered area itself
  • If a data table is rendered, it follows native table keyboard behaviour

ARIA

  • role="img" exposes the chart as a single image
  • aria-label (from label) names the chart
  • aria-describedby references the chart caption / data table

When to Use

  • Showing trends over time where the magnitude of the area emphasises the size of the value
  • Comparing two or three series with stacked or overlaid areas

When Not to Use

  • Use LineChart when only the trend (not magnitude) matters
  • Use BarChart or ColumnChart for discrete categorical data
  • Use Sparkline for tiny inline trend indicators

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 .area-chart as the root class. No default styles are included.

Related components

  • line-chart — line chart for trend without area emphasis
  • bar-chart / column-chart — categorical comparisons
  • scatter-chart — relationship between two variables
  • graphic-block — chart wrapper with title/notes
  • sparkline — tiny inline trend

References

Implementation Notes

  • Renders a <figure role="img"> containing an inline <svg> rendering of the area chart
  • The figure has an accessible name from the label prop and an extended description from the description prop
  • Data is supplied as series (one or more series of { x, y } points)
  • A textual data table can be rendered inside the same figure via the dataTable slot for screen readers and as a fallback when SVG is not available
  • 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: area-chart
  • PascalCase: AreaChart
  • Description: an area chart visualization showing sized components in continuous 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: .area-chart
  • Interactive: no

ARIA

  • role="img" exposes the chart as a single image
  • aria-label (from label) names the chart
  • aria-describedby references the chart caption / data table

Keyboard

  • No keyboard interactions on the rendered area itself
  • If a data table is rendered, it follows native table keyboard behaviour

Props

  • label: string (required) (default: —) — Accessible name for the chart
  • description: string (default: —) — Extended description (becomes a <figcaption> and is referenced via aria-describedby)
  • series: array of series (default: []) — Each series is { name: string; points: { x: number; y: number }[] }
  • dataTable: slot (default: —) — Optional fallback <table> summarising the data
  • ...restProps: HTML attributes (default: —) — Spread onto the root <figure>