# @vx/axis

An axis component consists of a line with ticks, tick labels, and an axis label that helps viewers interpret your graph.

You can use one of the 4 pre-made axes, or you can create your own based on the `<Axis />` element.

## Installation

    npm install --save @vx/axis

## Components

- Axis
- AxisBottom
- AxisLeft
- AxisRight
- AxisTop

## API

### <Axis />

# Axis.axisClassName<string>

# Axis.axisLineClassName<string>

# Axis.children<func>

# Axis.hideAxisLine<bool>

Default | false

# Axis.hideTicks<bool>

Default | false

# Axis.hideZero<bool>

Default | false

# Axis.label<string>

Default | ''

# Axis.labelClassName<string>

# Axis.labelOffset<number>

Default | 14

# Axis.labelProps<object>

Default | { textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: 'black' }

# Axis.left<number>

Default | 0

# Axis.numTicks<number>

Default | 10

# Axis.orientation<enum(ORIENT.top|ORIENT.right|ORIENT.bottom|ORIENT.left)>

Default | ORIENT.bottom

# Axis.rangePadding<number>

Default | 0

# Axis.scale<func> `required`

# Axis.stroke<string>

Default | 'black'

# Axis.strokeDasharray<string>

# Axis.strokeWidth<number>

Default | 1

# Axis.tickClassName<string>

# Axis.tickComponent<func>

# Axis.tickFormat<func>

# Axis.tickLabelProps<func>

Default | (tickValue, index) => ({ textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: 'black' })

# Axis.tickLength<number>

Default | 8

# Axis.tickStroke<string>

Default | 'black'

# Axis.tickTransform<string>

# Axis.tickValues<array>

# Axis.top<number>

Default | 0

### <AxisBottom />

# AxisBottom.axisClassName<string>

The class name applied to the outermost axis group element.

# AxisBottom.axisLineClassName<string>

The class name applied to the axis line element.

# AxisBottom.children<func>

For more control over rendering or to add event handlers to datum, pass a function as children.

# AxisBottom.hideAxisLine<bool>

If true, will hide the axis line.

# AxisBottom.hideTicks<bool>

If true, will hide the ticks (but not the tick labels).

# AxisBottom.hideZero<bool>

If true, will hide the '0' value tick and tick label.

# AxisBottom.label<string>

The text for the axis label.

# AxisBottom.labelClassName<string>

The class name applied to the axis label text element.

# AxisBottom.labelOffset<number>

Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)

Default | 8

# AxisBottom.labelProps<object>

Props applied to the axis label component.

# AxisBottom.left<number>

A left pixel offset applied to the entire axis.

# AxisBottom.numTicks<number>

The number of ticks wanted for the axis (note this is approximate)

# AxisBottom.rangePadding<number>

Pixel padding to apply to both sides of the axis.

# AxisBottom.scale<func> `required`

A d3 or vx scale function.

# AxisBottom.stroke<string>

The color for the stroke of the lines.

# AxisBottom.strokeDasharray<string>

The pattern of dashes in the stroke.

# AxisBottom.strokeWidth<number>

The pixel value for the width of the lines.

# AxisBottom.tickClassName<string>

The class name applied to each tick group.

# AxisBottom.tickComponent<func>

# AxisBottom.tickFormat<func>

A d3 formatter for the tick text.

# AxisBottom.tickLabelProps<func>

A function that returns props for a given tick label.

Default | ({ tick, index }) => ({ dy: '0.25em', fill: 'black', fontFamily: 'Arial', fontSize: 10, textAnchor: 'middle' })

# AxisBottom.tickLength<number>

The length of the tick lines.

Default | 8

# AxisBottom.tickStroke<string>

The color for the tick's stroke value.

# AxisBottom.tickTransform<string>

A custom SVG transform value to be applied to each tick group.

# AxisBottom.tickValues<array>

An array of values that determine the number and values of the ticks. Falls back to `scale.ticks()` or `.domain()`.

# AxisBottom.top<number>

A top pixel offset applied to the entire axis.

### <AxisLeft />

# AxisLeft.axisClassName<string>

# AxisLeft.axisLineClassName<string>

# AxisLeft.children<func>

# AxisLeft.hideAxisLine<bool>

# AxisLeft.hideTicks<bool>

# AxisLeft.hideZero<bool>

# AxisLeft.label<string>

# AxisLeft.labelClassName<string>

# AxisLeft.labelOffset<number>

Default | 36

# AxisLeft.labelProps<object>

# AxisLeft.left<number>

# AxisLeft.numTicks<number>

# AxisLeft.rangePadding<number>

# AxisLeft.scale<func> `required`

# AxisLeft.stroke<string>

# AxisLeft.strokeDasharray<string>

# AxisLeft.strokeWidth<number>

# AxisLeft.tickClassName<string>

# AxisLeft.tickComponent<func>

# AxisLeft.tickFormat<func>

# AxisLeft.tickLabelProps<func>

Default | ({ tick, index }) => ({ dx: '-0.25em', dy: '0.25em', fill: 'black', fontFamily: 'Arial', fontSize: 10, textAnchor: 'end' })

# AxisLeft.tickLength<number>

Default | 8

# AxisLeft.tickStroke<string>

# AxisLeft.tickTransform<string>

# AxisLeft.tickValues<array>

# AxisLeft.top<number>

### <AxisRight />

# AxisRight.axisClassName<string>

# AxisRight.axisLineClassName<string>

# AxisRight.children<func>

# AxisRight.hideAxisLine<bool>

# AxisRight.hideTicks<bool>

# AxisRight.hideZero<bool>

# AxisRight.label<string>

# AxisRight.labelClassName<string>

# AxisRight.labelOffset<number>

Default | 36

# AxisRight.labelProps<object>

# AxisRight.left<number>

# AxisRight.numTicks<number>

# AxisRight.rangePadding<number>

# AxisRight.scale<func> `required`

# AxisRight.stroke<string>

# AxisRight.strokeDasharray<string>

# AxisRight.strokeWidth<number>

# AxisRight.tickClassName<string>

# AxisRight.tickComponent<func>

# AxisRight.tickFormat<func>

# AxisRight.tickLabelProps<func>

Default | ({ tick, index }) => ({ dx: '0.25em', dy: '0.25em', fill: 'black', fontFamily: 'Arial', fontSize: 10, textAnchor: 'start' })

# AxisRight.tickLength<number>

Default | 8

# AxisRight.tickStroke<string>

# AxisRight.tickTransform<string>

# AxisRight.tickValues<array>

# AxisRight.top<number>

### <AxisTop />

# AxisTop.axisClassName<string>

# AxisTop.axisLineClassName<string>

# AxisTop.children<func>

# AxisTop.hideAxisLine<bool>

# AxisTop.hideTicks<bool>

# AxisTop.hideZero<bool>

# AxisTop.label<string>

# AxisTop.labelClassName<string>

# AxisTop.labelOffset<number>

Default | 8

# AxisTop.labelProps<object>

# AxisTop.left<number>

# AxisTop.numTicks<number>

# AxisTop.rangePadding<number>

# AxisTop.scale<func> `required`

# AxisTop.stroke<string>

# AxisTop.strokeDasharray<string>

# AxisTop.strokeWidth<number>

# AxisTop.tickClassName<string>

# AxisTop.tickComponent<func>

# AxisTop.tickFormat<func>

# AxisTop.tickLabelProps<func>

Default | ({ tick, index }) => ({ dy: '-0.25em', fill: 'black', fontFamily: 'Arial', fontSize: 10, textAnchor: 'middle' })

# AxisTop.tickLength<number>

Default | 8

# AxisTop.tickStroke<string>

# AxisTop.tickTransform<string>

# AxisTop.tickValues<array>

# AxisTop.top<number>