brand-ui — Axes

import { YAxis } from "@elabs-ai/components-charts";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui YAxis chart (from @elabs-ai/components-charts) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look YAxis up before writing code: `npx -y @elabs-ai/components-cli docs YAxis` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-charts is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Examples

13 live examples

Pinned Tick Count

`tickCount` pins the count at every width (the `sm` density would still cap it at 4).

Log Scale

A log ruler from a pinned lower bound, titled inside the plot.

Log Refused On Zero

Data containing 0: `scale="log"` warns once in development and draws linear.

Wrapped Category Labels

18-character categories at a ~96 px band step break onto two lines, never tilted.

Grid Ticks Mode

`Grid mode="ticks"`: short hairlines at the axis edge only — no rule crosses the plot.

Grid Off

`Grid mode="off"`: no furniture at all.

Inside Labels Top Axis

Labels inside the plot, a pinned domain, and the x axis on top.

Bar Value Domain

A pinned bar range: the value axis ends at exactly 100, not the data-derived 80.

Bar Domain Keeps Zero

Bars encode length, so a raised floor is refused: `domain={[20, 100]}` keeps the upper bound and draws from 0 (with a dev warning).

Composed Domain Keeps Zero

A composed chart with bars shares the bar rule: the floor stays at 0.

Auto Chart Axes

The same axis controls from a serialisable `ChartSpec.axes`.

Bar Axis Titles

Bar category-axis titles: `BarXAxis title` names the columns of a vertical chart, `BarYAxis title` the rows of a horizontal one — each `outside` (default, in the margin) or `inside` (in the plot corner the matching `XAxis`/`YAxis` uses; it does not step around bars, so it paints over the last column or the first row, legible on its halo).

API

`YAxis`

Prop	Type	Description
`yAxisId`	`string \| number`	Scale group id (Recharts `yAxisId`). Default: `"left"`.
`position`	`YAxisOrientation`	Which side of the chart to render labels. Default: `"left"`.
`orientation`	`YAxisOrientation`	@deprecated Use `position` — the same values (ADR 0042 A.2, row 11). Read until 7.0.0, with one development warning; when both are set, `position` wins.
`numTicks`	`number`	@deprecated Use `tickCount` — `numTicks` still wins when both are set, exactly as before (ADR 0042 A.2, row 7). Clamped to {@link Y_AXIS_MIN_TICK_COUNT}–{@link Y_AXIS_MAX_TICK_COUNT}. Read until 7.0.0, with one development warning.
`tickCount`	`AxisTickCount`	Tick target (RM-108). `"auto"` (default) derives it from the plot height — `tickTargetForHeight(innerHeight)`: 3 under 200 px, else 5.
`ticks`	`number[]`	Render exactly these tick values (RM-108), bypassing generation.
`domain`	`AxisDomain`	Pin either end of the value domain (RM-108); `"auto"` keeps the data-derived end. Read by the chart container, so place `YAxis` as a direct child. On a length encoding (bars) the domain always includes 0 — a non-zero lower bound is ignored with a dev warning (`charts-honesty`).
`scale`	`ValueScaleType`	How values map to pixels (RM-108). `"log"` refuses data or a domain that touches 0 (dev warning, renders linear); bars are linear only. Default: `"linear"`.
`title`	`ReactNode`	Axis title — names the unit of every tick (RM-108).
`titlePlacement`	`AxisTitlePlacement`	`"outside"` (default) — above the top tick label in the margin; `"inside"` — `HaloText` at the top of the axis inside the plot.
`labelPlacement`	`AxisLabelPlacement`	`"outside"` (default) — tick labels in the margin beside the plot; `"inside"` — labels sit just above their grid line inside the plot.
`valueFormat`	`ChartValueFormat`	How tick values are rendered. Default: `"compact"` — `1.5M`, not `1500k` and not `1500000`. Pass `"number"` for every digit.
`currency`	`string`	ISO 4217 code for `valueFormat: "currency"`. Falls back to `ChartConfigProvider`, then `"USD"`.
`formatValue`	`(value: number) => string`	Custom formatter for tick labels. Overrides `valueFormat` entirely when set.
`unit`	`string`	Unit text appended to {@link unitOn} tick(s) — `<YAxis unit="%" />` paints `"80 %"` on that tick, not every tick (RM-109). The tooltip is the place a unit repeats on every value (the blog's "3.4 % unemployed", not a bare "3.4 %"); see `TooltipRow.unit`.
`unitOn`	`"last" \| "first" \| "all"`	Which tick(s) {@link unit} paints on. Default: `"last"`.
`matchSeriesColor`	`boolean`	Paint the tick labels and title in the colour of this axis' series when it carries exactly ONE series; neutral otherwise (RM-121, Datawrapper's "label colour: match data"). The text goes through `seriesLabelInk` — the stroke mixed toward the label ink so it still reads at 4.5:1. Default `false`.
`sideLabel`	`ReactNode \| "auto"`	A caption naming which scale this is, above the tick column (RM-121). `"auto"` → "Left scale" / "Right scale" by `position`, through the locale seam (`charts.axis.leftScale` / `charts.axis.rightScale`).