# @vx/axis

    npm install --save @vx/axis

An axis is a line with ticks that helps you label your graphs.

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 />

    const axis = (
      <AxisBottom
        scale={xScale}
        top={yMax + margin.top}
        left={margin.left}
        label={'My string label'}
        stroke={'#1b1a1e'}
        tickTextFill={'#1b1a1e'}
      />
      <AxisLeft
        scale={yScale}
        top={margin.top}
        left={margin.left}
        label={<text {...labelStyles}>My component label</text>}
        stroke={'#1b1a1e'}
        tickTextFill={'#1b1a1e'}
      />
    );

## `<AxisTop/>`

Name | Default | Type | Description
--- | --- | --- | ---
scale |  | function | A d3 scale function.
top |  | number | A pixel value for the top margin.
left |  | number | A pixel value for the top margin.
stroke |  | string | The color for the stroke of the lines.
strokeWidth |  | number | The pixel value for the width of the lines.
strokeDasharray |  | array | The pattern of dashes in the stroke.
label |  | string or node | The text for the axis label, or a label component
numTicks | 10 | number | The number of ticks wanted for the axis.
tickFormat |  | function | A d3 formatter for the tick text.
tickStroke | black | string | The color for the tick's stroke value.
tickValues |  | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
tickK | -1 | number | A value that determines an offset in the tick position.
tickOffset |  | number | A value that determines the y offset in the tick position.
tickTransform |  | string | A custom SVG transform value to be applied to the ticks.
tickLength | 8 | number | The length of the tick lines.
tickPadding | 2 | number | The padding between the ticks and their labels.
tickTextAnchor | "middle" | string | The textAnchor value for the tick's text.
tickTextFontFamily | "Arial" | string | The font for the ticks.
tickTextFontSize | 10 | number | The font size for the ticks.
tickTextFill | black | string | The text fill color for the tick's text.
tickTextDy |  | number | The y offset to the tick's text.
tickTextDx |  | number | The x offset to the tick's text.
hideAxisLine | false | bool | If true, will hide the axis line.
hideTicks | false | bool | If true, will hide the ticks.
hideZero | false | bool | If true, will hide '0' values.
className |  | string | The class name applied to the axis group element.

## `<AxisBottom/>`

Name | Default | Type | Description
--- | --- | --- | ---
scale |  | function | A d3 scale function.
top |  | number | A pixel value for the top margin.
left |  | number | A pixel value for the top margin.
stroke |  | string | The color for the stroke of the lines.
strokeWidth |  | number | The pixel value for the width of the lines.
strokeDasharray |  | array | The pattern of dashes in the stroke.
label |  | string | The text for the axis label.
numTicks | 10 | number | The number of ticks wanted for the axis.
tickFormat |  | function | A d3 formatter for the tick text.
tickStroke | black | string | The color for the tick's stroke value.
tickValues |  | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
tickK | 1 | number | A value that determines an offset in the tick position.
tickOffset |  | number | A value that determines the y offset in the tick position.
tickTransform |  | string | A custom SVG transform value to be applied to the ticks.
tickLength | 8 | number | The length of the tick lines.
tickPadding | 2 | number | The padding between the ticks and their labels.
tickTextAnchor | "middle" | string | The textAnchor value for the tick's text.
tickTextFontFamily | "Arial" | string | The font for the ticks.
tickTextFontSize | 10 | number | The font size for the ticks.
tickTextFill | black | string | The text fill color for the tick's text.
tickTextDy |  | number | The y offset to the tick's text.
tickTextDx |  | number | The x offset to the tick's text.
hideAxisLine | false | bool | If true, will hide the axis line.
hideTicks | false | bool | If true, will hide the ticks.
hideZero | false | bool | If true, will hide '0' values.
className |  | string | The class name applied to the axis group element.

## `<AxisLeft/>`

Name | Default | Type | Description
--- | --- | --- | ---
scale |  | function | A d3 scale function.
top |  | number | A pixel value for the top margin.
left |  | number | A pixel value for the top margin.
stroke |  | string | The color for the stroke of the lines.
strokeWidth |  | number | The pixel value for the width of the lines.
strokeDasharray |  | array | The pattern of dashes in the stroke.
label |  | string | The text for the axis label.
numTicks | 10 | number | The number of ticks wanted for the axis.
tickFormat |  | function | A d3 formatter for the tick text.
tickStroke | black | string | The color for the tick's stroke value.
tickValues |  | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
tickK | -1 | number | A value that determines an offset in the tick position.
tickOffset |  | number | A value that determines the y offset in the tick position.
tickTransform |  | string | A custom SVG transform value to be applied to the ticks.
tickLength | 8 | number | The length of the tick lines.
tickPadding | 2 | number | The padding between the ticks and their labels.
tickTextAnchor | "end" | string | The textAnchor value for the tick's text.
tickTextFontFamily | "Arial" | string | The font for the ticks.
tickTextFontSize | 10 | number | The font size for the ticks.
tickTextFill | black | string | The text fill color for the tick's text.
tickTextDy |  | number | The y offset to the tick's text.
tickTextDx |  | number | The x offset to the tick's text.
hideAxisLine | false | bool | If true, will hide the axis line.
hideTicks | false | bool | If true, will hide the ticks.
hideZero | false | bool | If true, will hide '0' values.
className |  | string | The class name applied to the axis group element.

## `<AxisRight/>`

Name | Default | Type | Description
--- | --- | --- | ---
scale |  | function | A d3 scale function.
top |  | number | A pixel value for the top margin.
left |  | number | A pixel value for the top margin.
stroke |  | string | The color for the stroke of the lines.
strokeWidth |  | number | The pixel value for the width of the lines.
strokeDasharray |  | array | The pattern of dashes in the stroke.
label |  | string | The text for the axis label.
numTicks | 10 | number | The number of ticks wanted for the axis.
tickFormat |  | function | A d3 formatter for the tick text.
tickStroke | black | string | The color for the tick's stroke value.
tickValues |  | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
tickK | 1 | number | A value that determines an offset in the tick position.
tickOffset |  | number | A value that determines the y offset in the tick position.
tickTransform |  | string | A custom SVG transform value to be applied to the ticks.
tickLength | 8 | number | The length of the tick lines.
tickPadding | 2 | number | The padding between the ticks and their labels.
tickTextAnchor | "start" | string | The textAnchor value for the tick's text.
tickTextFontFamily | "Arial" | string | The font for the ticks.
tickTextFontSize | 10 | number | The font size for the ticks.
tickTextFill | black | string | The text fill color for the tick's text.
tickTextDy |  | number | The y offset to the tick's text.
tickTextDx |  | number | The x offset to the tick's text.
hideAxisLine | false | bool | If true, will hide the axis line.
hideTicks | false | bool | If true, will hide the ticks.
hideZero | false | bool | If true, will hide '0' values.
className |  | string | The class name applied to the axis group element.

## `<Axis />`

Name | Default | Type | Description
--- | --- | --- | ---
scale |  | function | A d3 scale function.
orient |  | string | An orientation defined as 'top', 'bottom', 'left', or 'right'.
top |  | number | A pixel value for the top margin.
left |  | number | A pixel value for the top margin.
stroke |  | string | The color for the stroke of the lines.
strokeWidth |  | number | The pixel value for the width of the lines.
strokeDasharray |  | array | The pattern of dashes in the stroke.
label | "default label" | string | The text for the axis label.
numTicks | 10 | number | The number of ticks wanted for the axis.
tickFormat |  | function | A d3 formatter for the tick text.
tickStroke | black | string | The color for the tick's stroke value.
tickValues |  | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
tickK | 1 | number | A value that determines an offset in the tick position.
tickOffset |  | number | A value that determines the y offset in the tick position.
tickTransform |  | string | A custom SVG transform value to be applied to the ticks.
tickLength | 8 | number | The length of the tick lines.
tickPadding | 2 | number | The padding between the ticks and their labels.
tickTextAnchor | "start" | string | The textAnchor value for the tick's text.
tickTextFontFamily | "Arial" | string | The font for the ticks.
tickTextFontSize | 10 | number | The font size for the ticks.
tickTextFill | black | string | The text fill color for the tick's text.
tickTextDy |  | number | The y offset to the tick's text.
tickTextDx |  | number | The x offset to the tick's text.
hideAxisLine | false | bool | If true, will hide the axis line.
hideTicks | false | bool | If true, will hide the ticks.
hideZero | false | bool | If true, will hide '0' values.
className |  | string | The class name applied to the axis group element.

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