Axis

Axis

Linear axis components for cartesian charts. Configurable tick formatting, label rotation, positioning, and axis line styling.

Import

import {
  LinearXAxis,
  LinearXAxisTickSeries,
  LinearXAxisTickLabel,
  LinearXAxisTickLine,
  LinearYAxis,
  LinearYAxisTickSeries,
  LinearYAxisTickLabel,
  LinearYAxisTickLine,
  LinearAxisLine
} from 'reaviz';

LinearXAxis / LinearYAxis Props

Prop	Type	Default (X)	Default (Y)	Description
type	'value' | 'time' | 'category' | 'duration'	'value'	'value'	Scale type
position	'start' | 'end' | 'center'	'end'	'start'	Axis placement
orientation	'horizontal' | 'vertical'	'horizontal'	'vertical'	Axis direction
scaled	boolean	false	false	Scale to data extent
roundDomains	boolean	false	false	Round domain values
domain	ChartDataTypes[]	—	—	Custom domain
tickSeries	ReactElement	<LinearXAxisTickSeries />	<LinearYAxisTickSeries />	Tick series component
axisLine	ReactElement | null	<LinearAxisLine />	<LinearAxisLine />	Axis line (null to hide)
visibility	'visible' | 'hidden'	—	—	Axis visibility
scale	any	—	—	Custom D3 scale

Tick Series Props

Prop	Type	Default	Description
tickSize	number	X: 75, Y: 30	Spacing between ticks
interval	number | TimeInterval	—	Custom tick interval
ellipsisLength	number	18	Max label characters before ellipsis
label	ReactElement | null	<LinearAxisTickLabel />	Tick label (null to hide)
line	ReactElement | null	<LinearAxisTickLine />	Tick line (null to hide)

Tick Label Props

Prop	Type	Default	Description
format	(value) => any	—	Custom label formatter
formatTooltip	(value) => any	—	Tooltip format for truncated labels
rotation	boolean | number	X: true, Y: false	Auto-rotate or fixed angle
padding	number | { fromAxis, alongAxis }	5	Label padding
fill	string	'#8F979F'	Text color
fontSize	number	11	Font size
fontFamily	string	'sans-serif'	Font family
align	'start' | 'end' | 'center' | 'inside' | 'outside'	'center'	Label alignment
position	'start' | 'end' | 'center'	X: 'end', Y: 'start'	Label position
textAnchor	'start' | 'end' | 'middle'	—	SVG text anchor
className	string	—	CSS class
onClick	(event, data) => void	—	Label click handler

Tick Line Props

Prop	Type	Default	Description
size	number	5	Tick line length
strokeColor	string	'#8F979F'	Line color
strokeWidth	number	1	Line thickness
position	'start' | 'end' | 'center'	X: 'end', Y: 'start'	Line position

Axis Line Props

Prop	Type	Default	Description
strokeColor	string	'#8F979F'	Line color
strokeWidth	number	1	Line thickness
strokeGradient	ReactElement<GradientProps> | null	—	Gradient for axis line

Custom Tick Formatting

import { LinearYAxis, LinearYAxisTickSeries, LinearYAxisTickLabel } from 'reaviz';

<AreaChart
  data={data}
  yAxis={
    <LinearYAxis
      type="value"
      tickSeries={
        <LinearYAxisTickSeries
          label={
            <LinearYAxisTickLabel
              format={(v) => `$${v.toLocaleString()}`}
            />
          }
        />
      }
    />
  }
/>

Hide Axis Labels (Keep Line)

<LinearXAxis
  type="time"
  tickSeries={<LinearXAxisTickSeries label={null} />}
/>

Hide Tick Lines (Keep Labels)

<LinearYAxis
  type="value"
  tickSeries={<LinearYAxisTickSeries line={null} />}
/>

Hide Entire Axis

<AreaChart
  data={data}
  xAxis={<LinearXAxis visibility="hidden" />}
/>

Remove Axis Line

<LinearYAxis type="value" axisLine={null} />

Fixed Label Rotation

<LinearXAxisTickLabel rotation={45} />

Category Axis

<LinearXAxis type="category" />

Time Axis with Custom Interval

import { timeMonth } from 'd3-time';

<LinearXAxis
  type="time"
  tickSeries={<LinearXAxisTickSeries interval={timeMonth.every(3)} />}
/>