# @vx/axis

    npm install --save @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.

## Example

    import { AxisBottom, AxisLeft } from '@vx/axis';
    // or
    // import * as Axis from '@vx/axis';
    // <Axis.AxisBottom />
    // or
    // import AxisBottom from '@vx/axis/build/Axis/AxisBottom';

    function MyChart() {
      // ...
      return (
        <svg>
          // ...
          <AxisBottom
            scale={xScale}
            top={yMax + margin.top}
            left={margin.left}
            axisClassName="axis-class"
            labelClassName="axis-label-class"
            tickClassName="tick-label-class"
            label="Bottom axis label"
            stroke="#333333"
            tickStroke="#333333"
          />
          <AxisLeft
            scale={yScale}
            top={margin.top}
            left={margin.left}
            label="Left axis label"
            labelProps={{ fontSize: 12, fill: 'black' }}
            tickFormat={(value, index) => `$${value}`}
            tickProps={(value, index) => ({
              dx: "0.33em",
              fill: "black",
              fontSize: 8,
              opacity: index % 2 === 0 ? 0.5 : 0.9,
            })}
          />
        </svg>
      );
    }

## `<AxisBottom />`

Name | Default | Type | Description
--- | --- | --- | ---
axisClassName |  | string | The class name applied to the outermost axis group element.
axisLineClassName |  | string | The class name applied to the axis line element.
hideAxisLine | `false` | bool | If true, will hide the axis line.
hideTicks | `false` | bool | If true, will hide the ticks (but not the tick labels).
hideZero | `false` | bool | If true, will hide the '0' value tick and tick label.
label | `""` | string | The text for the axis label.
labelClassName |  | string | The class name applied to the axis label text element.
labelOffset | `8` | number | Px offset of the axis label (does not include tick label font size, which is accounted for automatically)
labelProps | `{ textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: 'black' }` | object | Props applied to the axis label component.
left | `0` | number | A left pixel offset applied to the entire axis.
numTicks | `10` | number | The number of ticks wanted for the axis (note this is approximate)
rangePadding | `0` | number | Px padding to apply to both sides of the axis
scale | REQUIRED | function | A d3 scale function.
stroke | `black` | string | The color for the stroke of the lines.
strokeWidth | `1` | number | The pixel value for the width of the lines.
strokeDasharray |  | string | The pattern of dashes in the stroke.
tickClassName |  | string | The class name applied to each tick group.
tickFormat | `(val, i) => val` | function | A d3 formatter for the tick text.
tickLabelProps | `(val, i) => ({ dy: '0.25em', textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: 'black' })` | function | function that returns props for a given tick label.
tickLength | `8` | number | The length of the tick lines.
tickStroke | `black` | string | The color for the tick's stroke value.
tickTransform |  | string | A custom SVG transform value to be applied to each tick group.
tickValues |  | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
top | `0` | number | A top pixel offset applied to the entire axis.

## `<AxisLeft />`

Name | Default | Type | Description
--- | --- | --- | ---
axisClassName |  | string | The class name applied to the outermost axis group element.
axisLineClassName |  | string | The class name applied to the axis line element.
hideAxisLine | `false` | bool | If true, will hide the axis line.
hideTicks | `false` | bool | If true, will hide the ticks (but not the tick labels).
hideZero | `false` | bool | If true, will hide the '0' value tick and tick label.
label | `""` | string | The text for the axis label.
labelClassName |  | string | The class name applied to the axis label text element.
labelOffset | `36` | number | Px offset of the axis label (does not include tick label font size, which is accounted for automatically)
labelProps | `{ textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: 'black' }` | object | Props applied to the axis label component.
left | `0` | number | A left pixel offset applied to the entire axis.
numTicks | `10` | number | The number of ticks wanted for the axis (note this is approximate)
rangePadding | `0` | number | Px padding to apply to both sides of the axis
scale | REQUIRED | function | A d3 scale function.
stroke | `black` | string | The color for the stroke of the lines.
strokeWidth | `1` | number | The pixel value for the width of the lines.
strokeDasharray |  | string | The pattern of dashes in the stroke.
tickClassName |  | string | The class name applied to each tick group.
tickFormat | `(val, i) => val` | function | A d3 formatter for the tick text.
tickLabelProps | `(val, i) => ({ dx: '-0.25em', dy: '0.25em', textAnchor: 'end', fontFamily: 'Arial', fontSize: 10, fill: 'black' })` | function | function that returns props for a given tick label.
tickLength | `8` | number | The length of the tick lines.
tickStroke | `black` | string | The color for the tick's stroke value.
tickTransform |  | string | A custom SVG transform value to be applied to each tick group.
tickValues |  | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
top | `0` | number | A top pixel offset applied to the entire axis.

## `<AxisRight />`

Name | Default | Type | Description
--- | --- | --- | ---
axisClassName |  | string | The class name applied to the outermost axis group element.
axisLineClassName |  | string | The class name applied to the axis line element.
hideAxisLine | `false` | bool | If true, will hide the axis line.
hideTicks | `false` | bool | If true, will hide the ticks (but not the tick labels).
hideZero | `false` | bool | If true, will hide the '0' value tick and tick label.
label | `""` | string | The text for the axis label.
labelClassName |  | string | The class name applied to the axis label text element.
labelOffset | `36` | number | Px offset of the axis label (does not include tick label font size, which is accounted for automatically)
labelProps | `{ textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: 'black' }` | object | Props applied to the axis label component.
left | `0` | number | A left pixel offset applied to the entire axis.
numTicks | `10` | number | The number of ticks wanted for the axis (note this is approximate)
rangePadding | `0` | number | Px padding to apply to both sides of the axis
scale | REQUIRED | function | A d3 scale function.
stroke | `black` | string | The color for the stroke of the lines.
strokeWidth | `1` | number | The pixel value for the width of the lines.
strokeDasharray |  | string | The pattern of dashes in the stroke.
tickClassName |  | string | The class name applied to each tick group.
tickFormat | `(val, i) => val` | function | A d3 formatter for the tick text.
tickLabelProps | `(val, i) => ({ dx: '0.25em', dy: '0.25em', textAnchor: 'start', fontFamily: 'Arial', fontSize: 10, fill: 'black' })` | function | function that returns props for a given tick label.
tickLength | `8` | number | The length of the tick lines.
tickStroke | `black` | string | The color for the tick's stroke value.
tickTransform |  | string | A custom SVG transform value to be applied to each tick group.
tickValues |  | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
top | `0` | number | A top pixel offset applied to the entire axis.

## `<AxisTop />`

Name | Default | Type | Description
--- | --- | --- | ---
axisClassName |  | string | The class name applied to the outermost axis group element.
axisLineClassName |  | string | The class name applied to the axis line element.
hideAxisLine | `false` | bool | If true, will hide the axis line.
hideTicks | `false` | bool | If true, will hide the ticks (but not the tick labels).
hideZero | `false` | bool | If true, will hide the '0' value tick and tick label.
label | `""` | string | The text for the axis label.
labelClassName |  | string | The class name applied to the axis label text element.
labelOffset | `8` | number | Px offset of the axis label (does not include tick label font size, which is accounted for automatically)
labelProps | `{ textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: 'black' }` | object | Props applied to the axis label component.
left | `0` | number | A left pixel offset applied to the entire axis.
numTicks | `10` | number | The number of ticks wanted for the axis (note this is approximate)
rangePadding | `0` | number | Px padding to apply to both sides of the axis
scale | REQUIRED | function | A d3 scale function.
stroke | `black` | string | The color for the stroke of the lines.
strokeWidth | `1` | number | The pixel value for the width of the lines.
strokeDasharray |  | string | The pattern of dashes in the stroke.
tickClassName |  | string | The class name applied to each tick group.
tickFormat | `(val, i) => val` | function | A d3 formatter for the tick text.
tickLabelProps | `(val, i) => ({ dy: '-0.25em', textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: 'black' })` | function | function that returns props for a given tick label.
tickLength | `8` | number | The length of the tick lines.
tickStroke | `black` | string | The color for the tick's stroke value.
tickTransform |  | string | A custom SVG transform value to be applied to each tick group.
tickValues |  | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
top | `0` | number | A top pixel offset applied to the entire axis.

## `<Axis />`

Name | Default | Type | Description
--- | --- | --- | ---
axisClassName |  | string | The class name applied to the outermost axis group element.
axisLineClassName |  | string | The class name applied to the axis line element.
hideAxisLine | `false` | bool | If true, will hide the axis line.
hideTicks | `false` | bool | If true, will hide the ticks (but not the tick labels).
hideZero | `false` | bool | If true, will hide the '0' value tick and tick label.
label | `""` | string | The text for the axis label.
labelClassName |  | string | The class name applied to the axis label text element.
labelOffset | `14` | number | Px offset of the axis label (does not include tick label font size, which is accounted for automatically)
labelProps | `{ textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: 'black' }` | object | Props applied to the axis label component
left | `0` | number | A left pixel offset applied to the entire axis.
numTicks | `10` | number | The number of ticks wanted for the axis (note this is approximate)
orientation | `bottom` | 'top', 'right', 'bottom', or 'left' | Specifies the orientation of the axis.
rangePadding | `0` | number | Px padding to apply to both sides of the axis
scale | REQUIRED | function | A d3 scale function.
stroke | `black` | string | The color for the stroke of the lines.
strokeWidth | `1` | number | The pixel value for the width of the lines.
strokeDasharray |  | string | The pattern of dashes in the stroke.
tickClassName |  | string | The class name applied to each tick group.
tickFormat | `(val, i) => val` | function | A d3 formatter for the tick text.
tickLabelProps | `(val, i) => ({ textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: 'black' })` | function | function that returns props for a given tick label.
tickLength | `8` | number | The length of the tick lines.
tickStroke | `black` | string | The color for the tick's stroke value.
tickTransform |  | string | A custom SVG transform value to be applied to each tick group.
tickValues |  | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
top | `0` | number | A top pixel offset applied to the entire axis.

## Source code

- `<Axis />`
- `<AxisLeft />`
- `<AxisBottom />`
- `<AxisTop />`
- `<AxisRight />`