Charts·component·@astryxdesign/chartsExperimental

Chart

Chart lays out one or more mark definitions against shared responsive x and y scales. Use it for data visualizations that combine Astryx chart marks, axes, grids, legends, tooltips, and custom interaction layers.

Open in Playground @astryxdesign/charts

Showcases and examples

2 documented examples

Chart

A responsive monthly revenue bar chart.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · chart-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {Chart, ChartAxis, ChartGrid, bar} from '@astryxdesign/charts';

const monthlyRevenue = [
  {month: 'Jan', revenue: 42},
  {month: 'Feb', revenue: 58},
  {month: 'Mar', revenue: 51},
  {month: 'Apr', revenue: 74},
  {month: 'May', revenue: 68},
  {month: 'Jun', revenue: 86},
];

export default function ChartShowcase() {
  return (
    <Chart
      data={monthlyRevenue}
      xKey="month"
      series={[bar('revenue', {label: 'Revenue'})]}
      tooltip
      grid={<ChartGrid horizontal />}
      axes={
        <>
          <ChartAxis position="bottom" />
          <ChartAxis position="left" />
        </>
      }
      height={260}
    />
  );
}

Usage

Give the chart a concise title that states what is measured, and use subtitle for the comparison, time range, or other context needed to interpret it.
Use the same series array for Chart and any directly composed ChartTooltip so labels, colors, and resolved points stay aligned.
Use color as the only way to distinguish series or communicate status. Pair color with labels, mark shapes, direct annotations, or another visible cue.
Reuse one mark definition object across multiple Chart instances. Mark definitions currently carry per-chart layout metadata and are single-use.

Typed props

Prop	Type and behavior
`data`	`Record<string, unknown>[]` · required Rows to visualize. Each row may contain the x field and one or more series fields.
`xKey`	`string` · required Field name read from each data row for the shared x scale.
`series`	`SeriesDef[]` · required Mark definitions created by helpers such as bar(), line(), area(), or dot(). Build a fresh array for each Chart.
`height`	`number` · default 300 Chart height in CSS pixels.
`margin`	`Partial<ChartMargin>` · default {top: 24, right: 24, bottom: 32, left: 48} Plot inset overrides in CSS pixels for top, right, bottom, and left.
`yBaseline`	`'auto' \| 'zero' \| 'data'` · default 'auto' How Chart derives the y-domain when yDomain is omitted: mark-aware zero/headroom, symmetric around zero, or tight to the data extent.
`yDomain`	`[number, number]` Explicit y-domain. When set, it takes precedence over yBaseline, automatic headroom, and scale nicening.
`xDomain`	`[number, number]` Explicit x-domain for numeric scales, including an empty streaming window. Categorical scales ignore it.
`grid`	`ReactNode` Grid content rendered behind the series, normally ChartGrid. Slot: ChartGrid
`axes`	`ReactNode` Axis content rendered after the series, normally one or more ChartAxis elements. Slot: ChartAxis, ChartAxis
`legend`	`boolean \| ChartLegendProps` · default false Set true for a derived bottom legend, or pass items, position, and alignment.
`tooltip`	`boolean \| Omit<ChartTooltipProps, 'series'>` · default false Set true for the grouped pointer tooltip, or pass render and presentation options.
`interactions`	`ReactNode` Interaction overlays rendered above the pointer-capture layer.
`children`	`ReactNode` Additional SVG content rendered after the built-in tooltip for advanced composition.
`title`	`string` Visible heading and accessible name for the chart image. A localized fallback is derived when omitted.
`subtitle`	`string` Visible supporting text that also describes the chart image.
`ref`	`Ref<HTMLDivElement>` Ref forwarded to the root chart container.
`xstyle`	`StyleXStyles` StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.
`className`	`string` CSS class name appended to the root chart container.
`style`	`CSSProperties` Inline styles merged onto the root chart container after the component styles.

Anatomy

Header · optional

Optional visible title and supporting subtitle above the plot.

Plot · required

Responsive SVG coordinate space containing the clipped series marks.

Grid and axes · optional

Caller-supplied ChartGrid and ChartAxis elements that share the plot scales.

Legend · optional

Derived or caller-supplied series labels and swatches placed above, below, at the start, or at the end of the plot.

Tooltip and interactions · optional

Pointer-driven overlays that consume the chart interaction stream.

Data table · optional

Visually hidden tabular alternative rendered for small datasets.

Accessibility

Accessible chart name

Semantics · 1.1.1 Non-text Content · Required

Provide title when a product-specific name is available. Without it, Chart derives a localized name from the primary series labels and xKey.

States: All

Small-data table

Content · 1.1.1 Non-text Content · Required for supported small datasets

Chart mirrors small datasets into a visually hidden table. For larger datasets, provide an equivalent nearby summary or data view because the built-in table is intentionally omitted.

States: 1–100 row × series cells

Meaningful chart graphics

Color contrast · 1.4.11 Non-text Contrast · 3:1 when the graphic carries information

Measure meaningful marks and state indicators against their rendered backdrop. Decorative grid lines are not required to meet the non-text threshold.

States: Light, Dark, Supported themes

Tooltip information

Keyboard · 2.1.1 Keyboard and 2.5.1 Pointer Gestures · Supplemental only

Do not make hover-only tooltip content the only way to obtain important values. Keep the hidden table or another equivalent data view available.

States: Tooltip enabled