CortexcnCortexcn
Get started

Y Axis

Value labels for the vertical axis in line and area charts

Installation

ProPart of Cortexcn Pro

The source for y-axis comes with a Cortexcn Pro license, along with every other chart and the website templates. Pick a license on the pricing page.

Buy ProSee what is in Pro

Usage

The YAxis component displays value labels along the left or right side of time-series charts (LineChart, AreaChart, ComposedChart, ScatterChart, and vertical BarChart). It must be used inside the chart shell. Ensure your chart has sufficient margin for the labels.

import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  ChartTooltip,
} from "@/components/charts";

<LineChart data={data} margin={{ left: 50 }}>
  <Line dataKey="value" />
  <YAxis />
  <XAxis />
  <ChartTooltip />
</LineChart>;

Props

PropTypeDefaultDescription
yAxisIdstring | number"left"Scale group (pair with yAxisId on Line / Area)
orientation"left" | "right""left"Which side of the chart renders tick labels
numTicksnumber5Approximate tick count hint for d3 scale.ticks() (actual labels may differ). Valid range: 1–10
formatLargeNumbersbooleantrueFormat values ≥1000 as "1k", "2k", etc.
formatValue(value: number) => string—Custom tick formatter (overrides formatLargeNumbers)

Multiple Y axes (biaxial)

Assign each series and axis the same yAxisId, and use orientation="right" on the secondary YAxis. Increase margin.right (and margin.left if needed) so labels fit.

<LineChart data={data} margin={{ left: 56, right: 56 }}>
  <Line dataKey="uv" yAxisId="left" />
  <Line dataKey="pv" yAxisId="right" stroke="var(--chart-2)" />
  <YAxis yAxisId="left" />
  <YAxis yAxisId="right" orientation="right" />
  <XAxis />
</LineChart>

Margin

YAxis renders labels in the chart's left margin. Use margin={{ left: 50 }} (or more) on your chart to leave space for the labels.

Theming

Labels use the text-chart-label class, which inherits from your theme's muted foreground color.