Skip to content

Chart

Shared chart pieces: the legend, the tooltip readout, the data table and the ChartFrame shell that AreaChart and BarChart draw into.

alphaReact AriaSource
  • Income
  • Spending
  • Savings
  • Investments
  • Web
  • iOS
  • Android

Installation

pnpm add @syntara/react @syntara/tokens
import { ChartLegend, ChartTooltip, ChartTable, ChartFrame, chartColor, chartTicks, chartLinePath, chartAreaPath, chartAxisFormat, formatChartValue, formatChartX, useChartSize } from '@syntara/react';

Usage

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

export function Legend() {
  return <ChartLegend series={[{ key: 'income', label: 'Income' }, { key: 'spending', label: 'Spending' }]} />;
}

Examples

Tooltip readout

The single-series value pill and the multi-series readout.

$4,21012 Oct
Week 6
  • Income$5,200
  • Spending$4,100

Accessibility

No keyboard interaction of its own.

  • ChartLegend is a list; swatches are aria-hidden and the names are text in text.subtle, never in the series colour.
  • ChartTooltip is presentational; ChartFrame renders it aria-hidden because the focused option already carries the same values.
  • ChartTable is a real <table> with a caption, column headers and row headers. It is visually hidden by default so every chart has a screen-reader equivalent.
  • ChartFrame's keyboard model (ListBox, arrows, Home/End, Escape) is documented on Area Chart and Bar Chart.

Guidelines

Do

  • Show a legend for two or more series; skip it for one (the title says what's plotted).
  • Use chartColor(i) for custom marks so they follow the brand's solved palette.

Don’t

  • Don't colour legend or readout text with the series colour.
  • Don't add a fifth palette slot; chartColor repeats after 4.

API reference

ChartLegend

seriesRequired
ChartSeries[]

Series in palette order; each gets --syntara-chart-<n> unless it sets color.

shape
  • squaredefault
  • line

Mirror the mark: square for areas and bars, line for lines.

ChartTooltip

titleRequired
string

The x value, formatted.

rowsRequired
{ key; label; value; color }[]

One row per series. One row renders a pill with the value first.

shape
  • linedefault
  • square

Key shape. Tooltips key with a short stroke.

ChartTable

captionRequired
string

The table's name (the chart's).

series / rows / xLabelRequired
ChartSeries[] / { x; values }[] / string

Columns, formatted rows and the first column's header.

isVisible
boolean

Shows the table instead of hiding it visually.

Default false

ChartFrame

count / mode / domain / ticks / marks / active / anchorY / tooltipRequired
see chart.tsx

The low-level shell: axes, grid, SVG, ListBox hit layer, readout, legend and table. Build new chart types on it; marks() gets physical (RTL-mirrored) coordinates.

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.

Colour6
text.defaulttext.subtleborder.defaultborder.subtlesurface.raisedfocus.ring
Type8
font.bodyfont.size.xsfont.size.smfont.size.mdfont.tracking.xsfont.tracking.smfont.weight.semiboldfont.weight.medium
Space and size5
space.1space.2space.3space.4space.16
Shape3
radius.containerradius.fieldradius.pill
Depth3
hairlineshadow.overlayshadow.highlight
Motion4
motion.duration.fastmotion.duration.normalmotion.easingmotion.easingOut
Other6
chart.1chart.2chart.3chart.4chart.gridchart.axis