Charts·component·@astryxdesign/chartsExperimental

Chart Axis

ChartAxis renders tick labels and optional edge and tick lines from the scales owned by a parent Chart. Use it in the Chart axes slot for physical top, right, bottom, or left plot edges.

@astryxdesign/charts

Authored source examples

Source examples recorded in the documentation for this entry.

Bottom and left axes

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

<Chart
  data={monthlyRevenue}
  xKey="month"
  series={[bar('revenue')]}
  grid={<ChartGrid horizontal />}
  axes={
    <>
      <ChartAxis position="bottom" />
      <ChartAxis position="left" tickFormat={value => String(value)} />
    </>
  }
/>;

Dense category labels

<ChartAxis
  position="bottom"
  maxTicks={8}
  truncate={12}
  showTicks
/>;

Usage

ChartAxis renders tick labels and optional edge and tick lines from the scales owned by a parent Chart. Use it in the Chart axes slot for physical top, right, bottom, or left plot edges.

Use ChartAxis inside Chart so its labels, ticks, and edge line share the same scales and plot dimensions as the marks.
Use tickFormat for product-specific units or locale formatting, and maxTicks or truncate when dense category labels need a bounded presentation.
Use axis labels or a pointer tooltip as the only way to obtain important values. Give Chart an accessible name and preserve an equivalent data view or summary.
Hide the edge line while showing tick marks. showTicks intentionally keeps the line visible so each mark has a grounded edge.

Typed props

Prop	Type and behavior
`position`	`'top' \| 'right' \| 'bottom' \| 'left'` · required Physical plot edge on which to render the axis.
`tickCount`	`number` · default 5 Approximate continuous-scale tick count. d3 chooses the final values.
`maxTicks`	`number` Maximum displayed label count. Labels are evenly skipped when the generated set is larger.
`tickFormat`	`(value: unknown) => string` Formats each retained tick. When omitted, continuous scales use d3 formatting and band scales use their category strings.
`truncate`	`number` Maximum content characters retained before an ellipsis is appended. User-perceived characters remain intact.
`animated`	`boolean` · default true Whether tick position and visibility changes use the built-in transition.
`showAxisLine`	`boolean` · default true for bottom; false for top, right, and left Whether to draw the edge line. Tick marks force the line on so they remain grounded.
`showTicks`	`boolean` · default false Whether to draw an outward mark at each retained tick.

Anatomy

Axis edge line · optional

Line along the selected plot edge. It is shown by default only on the bottom edge and whenever tick marks are shown.

Tick marks · optional

Short lines extending outward from each retained tick position.

Tick labels · required

Formatted scale values or categories positioned outside the selected plot edge.

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. Tick labels supplement that chart-level alternative rather than replacing it.

States: All

Label text integrity

Content · Unicode grapheme clusters · Required when truncate is set

Truncation keeps emoji, joined emoji sequences, flags, and combining marks intact before appending the ellipsis.

States: Truncated labels