Area Chart

Installation

pnpm add @syntara/react @syntara/tokens

import { AreaChart, LineChart } from '@syntara/react';

Usage

import { AreaChart } from '@syntara/react';

export function Revenue({ data }: { data: { month: string; revenue: number }[] }) {
  return (
    <AreaChart
      aria-label="Revenue by month"
      data={data}
      x="month"
      series={[{ key: 'revenue', label: 'Revenue' }]}
      format={{ value: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } }}
    />
  );
}

Examples

Accessibility

• The plot's hit layer is a React Aria ListBox (horizontal): one option per x position, named with its x and every series value, e.g. "Mar: Revenue $19,800, Costs $13,100". Focusing an option makes the screen reader read it, so no live region is needed.
• The ListBox is named by aria-label or aria-labelledby (one is required) and described by a one-sentence summary (generated from the data, or the summary prop).
• Every chart also renders its data as a <table> with a caption, visually hidden unless showTable. No value is only reachable by hovering.
• The SVG, axis labels and the floating readout are aria-hidden: they repeat what the options and the table say.
• Pointer, pen and touch snap to the nearest x position (full-height bands), so nobody has to land on a 2px line or a thin bar.
• Text never wears a series colour: labels, axes, legend and readout use text.default and text.subtle; the series colour is only on marks and swatches. Series colours come from --syntara-chart-1..4, solved per brand and scheme to reach 3:1 on surfaces and stay distinguishable under colour-vision deficiency.
• A 2px focus ring surrounds the plot and axes while an x position has keyboard focus.
• Motion (line draw-in, area fade-up, bar growth, readout glide) sits behind prefers-reduced-motion: no-preference.
• There are no disabled or invalid states: a chart is read-only.

Guidelines

API reference

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour8

text.defaulttext.subtleborder.defaultborder.subtlesurface.raisedfocus.ringtext.brandaccent.text

Type6

font.bodyfont.size.xsfont.size.smfont.tracking.xsfont.tracking.smfont.weight.semibold

Space and size4

space.1space.2space.3space.4

Shape3

radius.containerradius.fieldradius.pill

Depth4

hairlineshadow.overlayshadow.highlightshadow.raised

Motion7

motion.duration.fastmotion.duration.normalmotion.duration.slowmotion.easingmotion.easingOutmotion.springmotion.duration.spring

Other6

chart.1chart.2chart.3chart.4chart.gridchart.axis