@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

Examples

Components

APIs

#<Axis />

# Axis.scaleGenericScale<ScaleInput>required

A d3 or vx scale function.

# Axis.axisClassNamestringoptional

The class name applied to the outermost axis group element.

# Axis.axisLineClassNamestringoptional

The class name applied to the axis line element.

# Axis.children(renderProps: ChildRenderProps<ScaleInput>) => ReactNodeoptional

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

# Axis.hideAxisLinebooleanoptional

If true, will hide the axis line.

Default false

# Axis.hideTicksbooleanoptional

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

Default false

# Axis.hideZerobooleanoptional

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

Default false

# Axis.labelstringoptional

The text for the axis label.

Default ""

# Axis.labelClassNamestringoptional

The class name applied to the axis label text element.

# Axis.labelOffsetnumberoptional

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

Default 14

# Axis.labelPropsPartial<TextProps>optional

Props applied to the axis label component.

Default { textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: '#222', }

# Axis.leftnumberoptional

A left pixel offset applied to the entire axis.

Default 0

# Axis.numTicksnumberoptional

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

Default 10

# Axis.orientationAxisOrientationoptional

Default ORIENT.bottom

# Axis.rangePaddingnumberoptional

Pixel padding to apply to both sides of the axis.

Default 0

# Axis.strokestringoptional

The color for the stroke of the lines.

Default #222

# Axis.strokeDasharraystringoptional

The pattern of dashes in the stroke.

# Axis.strokeWidthnumberoptional

The pixel value for the width of the lines.

Default 1

# Axis.tickClassNamestringoptional

The class name applied to each tick group.

# Axis.tickComponent(tickRendererProps: TickRendererProps) => ReactNodeoptional

Override the component used to render tick labels (instead of <Text /> from @vx/text)

# Axis.tickFormatTickFormatter<ScaleInput>optional

A d3 formatter for the tick text.

# Axis.tickLabelPropsTickLabelProps<ScaleInput>optional

A function that returns props for a given tick label.

Default (/** tickValue, index */) => ({ textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: '#222', })

# Axis.tickLengthnumberoptional

The length of the tick lines.

Default 8

# Axis.tickStrokestringoptional

The color for the tick's stroke value.

Default #222

# Axis.tickTransformstringoptional

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

# Axis.tickValuesScaleInput[]optional

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

# Axis.topnumberoptional

A top pixel offset applied to the entire axis.

Default 0

#<AxisBottom />

# AxisBottom.scaleGenericScale<ScaleInput>required

A d3 or vx scale function.

# AxisBottom.axisClassNamestringoptional

The class name applied to the outermost axis group element.

# AxisBottom.axisLineClassNamestringoptional

The class name applied to the axis line element.

# AxisBottom.children(renderProps: ChildRenderProps<ScaleInput>) => ReactNodeoptional

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

# AxisBottom.hideAxisLinebooleanoptional

If true, will hide the axis line.

# AxisBottom.hideTicksbooleanoptional

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

# AxisBottom.hideZerobooleanoptional

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

# AxisBottom.labelstringoptional

The text for the axis label.

# AxisBottom.labelClassNamestringoptional

The class name applied to the axis label text element.

# AxisBottom.labelOffsetnumberoptional

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

Default 8

# AxisBottom.labelPropsPartial<TextProps>optional

Props applied to the axis label component.

# AxisBottom.leftnumberoptional

A left pixel offset applied to the entire axis.

# AxisBottom.numTicksnumberoptional

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

# AxisBottom.rangePaddingnumberoptional

Pixel padding to apply to both sides of the axis.

# AxisBottom.strokestringoptional

The color for the stroke of the lines.

# AxisBottom.strokeDasharraystringoptional

The pattern of dashes in the stroke.

# AxisBottom.strokeWidthnumberoptional

The pixel value for the width of the lines.

# AxisBottom.tickClassNamestringoptional

The class name applied to each tick group.

# AxisBottom.tickComponent(tickRendererProps: TickRendererProps) => ReactNodeoptional

Override the component used to render tick labels (instead of <Text /> from @vx/text)

# AxisBottom.tickFormatTickFormatter<ScaleInput>optional

A d3 formatter for the tick text.

# AxisBottom.tickLabelPropsTickLabelProps<ScaleInput>optional

A function that returns props for a given tick label.

Default (/** tickValue, index */) => ({ dy: '0.25em', fill: '#222', fontFamily: 'Arial', fontSize: 10, textAnchor: 'middle', })

# AxisBottom.tickLengthnumberoptional

The length of the tick lines.

Default 8

# AxisBottom.tickStrokestringoptional

The color for the tick's stroke value.

# AxisBottom.tickTransformstringoptional

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

# AxisBottom.tickValuesScaleInput[]optional

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

# AxisBottom.topnumberoptional

A top pixel offset applied to the entire axis.

#<AxisLeft />

# AxisLeft.scaleGenericScale<ScaleInput>required

A d3 or vx scale function.

# AxisLeft.axisClassNamestringoptional

The class name applied to the outermost axis group element.

# AxisLeft.axisLineClassNamestringoptional

The class name applied to the axis line element.

# AxisLeft.children(renderProps: ChildRenderProps<ScaleInput>) => ReactNodeoptional

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

# AxisLeft.hideAxisLinebooleanoptional

If true, will hide the axis line.

# AxisLeft.hideTicksbooleanoptional

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

# AxisLeft.hideZerobooleanoptional

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

# AxisLeft.labelstringoptional

The text for the axis label.

# AxisLeft.labelClassNamestringoptional

The class name applied to the axis label text element.

# AxisLeft.labelOffsetnumberoptional

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

Default 36

# AxisLeft.labelPropsPartial<TextProps>optional

Props applied to the axis label component.

# AxisLeft.leftnumberoptional

A left pixel offset applied to the entire axis.

# AxisLeft.numTicksnumberoptional

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

# AxisLeft.rangePaddingnumberoptional

Pixel padding to apply to both sides of the axis.

# AxisLeft.strokestringoptional

The color for the stroke of the lines.

# AxisLeft.strokeDasharraystringoptional

The pattern of dashes in the stroke.

# AxisLeft.strokeWidthnumberoptional

The pixel value for the width of the lines.

# AxisLeft.tickClassNamestringoptional

The class name applied to each tick group.

# AxisLeft.tickComponent(tickRendererProps: TickRendererProps) => ReactNodeoptional

Override the component used to render tick labels (instead of <Text /> from @vx/text)

# AxisLeft.tickFormatTickFormatter<ScaleInput>optional

A d3 formatter for the tick text.

# AxisLeft.tickLabelPropsTickLabelProps<ScaleInput>optional

A function that returns props for a given tick label.

Default (/** tickValue, index */) => ({ dx: '-0.25em', dy: '0.25em', fill: '#222', fontFamily: 'Arial', fontSize: 10, textAnchor: 'end', })

# AxisLeft.tickLengthnumberoptional

The length of the tick lines.

Default 8

# AxisLeft.tickStrokestringoptional

The color for the tick's stroke value.

# AxisLeft.tickTransformstringoptional

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

# AxisLeft.tickValuesScaleInput[]optional

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

# AxisLeft.topnumberoptional

A top pixel offset applied to the entire axis.

#<AxisRight />

# AxisRight.scaleGenericScale<ScaleInput>required

A d3 or vx scale function.

# AxisRight.axisClassNamestringoptional

The class name applied to the outermost axis group element.

# AxisRight.axisLineClassNamestringoptional

The class name applied to the axis line element.

# AxisRight.children(renderProps: ChildRenderProps<ScaleInput>) => ReactNodeoptional

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

# AxisRight.hideAxisLinebooleanoptional

If true, will hide the axis line.

# AxisRight.hideTicksbooleanoptional

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

# AxisRight.hideZerobooleanoptional

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

# AxisRight.labelstringoptional

The text for the axis label.

# AxisRight.labelClassNamestringoptional

The class name applied to the axis label text element.

# AxisRight.labelOffsetnumberoptional

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

Default 36

# AxisRight.labelPropsPartial<TextProps>optional

Props applied to the axis label component.

# AxisRight.leftnumberoptional

A left pixel offset applied to the entire axis.

# AxisRight.numTicksnumberoptional

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

# AxisRight.rangePaddingnumberoptional

Pixel padding to apply to both sides of the axis.

# AxisRight.strokestringoptional

The color for the stroke of the lines.

# AxisRight.strokeDasharraystringoptional

The pattern of dashes in the stroke.

# AxisRight.strokeWidthnumberoptional

The pixel value for the width of the lines.

# AxisRight.tickClassNamestringoptional

The class name applied to each tick group.

# AxisRight.tickComponent(tickRendererProps: TickRendererProps) => ReactNodeoptional

Override the component used to render tick labels (instead of <Text /> from @vx/text)

# AxisRight.tickFormatTickFormatter<ScaleInput>optional

A d3 formatter for the tick text.

# AxisRight.tickLabelPropsTickLabelProps<ScaleInput>optional

A function that returns props for a given tick label.

Default (/** tickValue, index */) => ({ dx: '0.25em', dy: '0.25em', fill: '#222', fontFamily: 'Arial', fontSize: 10, textAnchor: 'start', })

# AxisRight.tickLengthnumberoptional

The length of the tick lines.

Default 8

# AxisRight.tickStrokestringoptional

The color for the tick's stroke value.

# AxisRight.tickTransformstringoptional

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

# AxisRight.tickValuesScaleInput[]optional

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

# AxisRight.topnumberoptional

A top pixel offset applied to the entire axis.

#<AxisTop />

# AxisTop.scaleGenericScale<ScaleInput>required

A d3 or vx scale function.

# AxisTop.axisClassNamestringoptional

The class name applied to the outermost axis group element.

# AxisTop.axisLineClassNamestringoptional

The class name applied to the axis line element.

# AxisTop.children(renderProps: ChildRenderProps<ScaleInput>) => ReactNodeoptional

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

# AxisTop.hideAxisLinebooleanoptional

If true, will hide the axis line.

# AxisTop.hideTicksbooleanoptional

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

# AxisTop.hideZerobooleanoptional

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

# AxisTop.labelstringoptional

The text for the axis label.

# AxisTop.labelClassNamestringoptional

The class name applied to the axis label text element.

# AxisTop.labelOffsetnumberoptional

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

Default 8

# AxisTop.labelPropsPartial<TextProps>optional

Props applied to the axis label component.

# AxisTop.leftnumberoptional

A left pixel offset applied to the entire axis.

# AxisTop.numTicksnumberoptional

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

# AxisTop.rangePaddingnumberoptional

Pixel padding to apply to both sides of the axis.

# AxisTop.strokestringoptional

The color for the stroke of the lines.

# AxisTop.strokeDasharraystringoptional

The pattern of dashes in the stroke.

# AxisTop.strokeWidthnumberoptional

The pixel value for the width of the lines.

# AxisTop.tickClassNamestringoptional

The class name applied to each tick group.

# AxisTop.tickComponent(tickRendererProps: TickRendererProps) => ReactNodeoptional

Override the component used to render tick labels (instead of <Text /> from @vx/text)

# AxisTop.tickFormatTickFormatter<ScaleInput>optional

A d3 formatter for the tick text.

# AxisTop.tickLabelPropsTickLabelProps<ScaleInput>optional

A function that returns props for a given tick label.

Default (/** tickValue, index */) => ({ dy: '-0.25em', fill: '#222', fontFamily: 'Arial', fontSize: 10, textAnchor: 'middle', })

# AxisTop.tickLengthnumberoptional

The length of the tick lines.

Default 8

# AxisTop.tickStrokestringoptional

The color for the tick's stroke value.

# AxisTop.tickTransformstringoptional

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

# AxisTop.tickValuesScaleInput[]optional

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

# AxisTop.topnumberoptional

A top pixel offset applied to the entire axis.