Charts·component·@astryxdesign/chartsExperimental

Chart Grid

ChartGrid draws horizontal and vertical guide lines from the scales owned by a parent Chart. Use it in the Chart grid slot so guides share the plot dimensions and tick values used by the chart.

@astryxdesign/charts

Authored source examples

Source examples recorded in the documentation for this entry.

Horizontal guides

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

<Chart
  data={monthlyRevenue}
  xKey="month"
  series={[bar('revenue')]}
  grid={<ChartGrid />}
/>;

Horizontal and vertical guides

<Chart
  data={monthlyRevenue}
  xKey="month"
  series={[bar('revenue')]}
  grid={<ChartGrid horizontal vertical tickCount={6} />}
/>;

Usage

ChartGrid draws horizontal and vertical guide lines from the scales owned by a parent Chart. Use it in the Chart grid slot so guides share the plot dimensions and tick values used by the chart.

Pair ChartGrid with ChartAxis when readers need labelled values beside the guide lines.
Use horizontal guides for value comparison and add vertical guides only when they help readers align categories or continuous x values.
Use grid lines as the only way to communicate a value or distinction. Keep meaningful chart information in labels, marks, and the parent Chart alternative.
Expect tickCount to thin categorical band centers. It requests density only for continuous scales; categorical vertical guides render once per band.

Typed props

Prop	Type and behavior
`horizontal`	`boolean` · default true Whether to draw horizontal guides at continuous y ticks other than zero.
`vertical`	`boolean` · default false Whether to draw vertical guides at continuous x ticks or categorical band centers.
`tickCount`	`number` · default 5 Approximate guide count requested from continuous scales. It does not thin categorical band centers.

Anatomy

Grid lines · optional

Horizontal lines at continuous y ticks and vertical lines at x ticks or categorical band centers.

Accessibility

Chart alternative

Content · 1.1.1 Non-text Content · Required on the parent Chart

Chart owns the accessible image name and supported small-data table. Grid lines supplement that chart-level alternative rather than replacing it.

States: All

Visual-only guides

Color contrast · 1.4.11 Non-text Contrast · Do not carry information alone

Grid lines are supporting guides. Preserve visible labels, marks, or another qualifying cue so understanding does not depend on the grid alone.

States: Horizontal, Vertical, Combined