Star
Chart primitives
Layouts & specialized
Interactions
SVG utilities
Data utilities
Umbrella package

@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. Note that the @vx/react-spring package exports an AnimatedAxis variant with animated ticks.

Installation

npm install --save @vx/axis

Examples

Axes & scales
<Axis.AxisBottom />
Bar Stack
<Shape.BarStack />
Area difference chart
<Threshold />

Components

APIs

#<Axis />

# Axis.scaleScalerequired

A d3 or vx scale function.

# Axis.axisClassNamestring | undefinedoptional

The class name applied to the outermost axis group element.

# Axis.axisLineClassNamestring | undefinedoptional

The class name applied to the axis line element.

# Axis.children((renderProps: AxisRendererProps<Scale>) => ReactNode) | undefinedoptional

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

# Axis.hideAxisLineboolean | undefinedoptional

If true, will hide the axis line.

Default false

# Axis.hideTicksboolean | undefinedoptional

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

Default false

# Axis.hideZeroboolean | undefinedoptional

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

Default false

# Axis.labelstring | undefinedoptional

The text for the axis label.

# Axis.labelClassNamestring | undefinedoptional

The class name applied to the axis label text element.

# Axis.labelOffsetnumber | undefinedoptional

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

# Axis.labelPropsPartial<TextProps> | undefinedoptional

Props applied to the axis label component.

# Axis.leftnumber | undefinedoptional

A left pixel offset applied to the entire axis.

Default 0

# Axis.numTicksnumber | undefinedoptional

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

Default 10

# Axis.orientation"top" | "left" | "right" | "bottom" | undefinedoptional

Placement of the axis

Default Orientation.bottom

# Axis.rangePaddingnumber | undefinedoptional

Pixel padding to apply to both sides of the axis.

Default 0

# Axis.strokestring | undefinedoptional

The color for the stroke of the lines.

# Axis.strokeDasharraystring | undefinedoptional

The pattern of dashes in the stroke.

# Axis.strokeWidthnumber | undefinedoptional

The pixel value for the width of the lines.

# Axis.tickClassNamestring | undefinedoptional

The class name applied to each tick group.

# Axis.tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefinedoptional

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

# Axis.tickFormatTickFormatter<Parameters<Scale>[0]> | undefinedoptional

A d3 formatter for the tick text.

# Axis.tickLabelPropsTickLabelProps<Parameters<Scale>[0]> | undefinedoptional

A function that returns props for a given tick label.

# Axis.tickLengthnumber | undefinedoptional

The length of the tick lines.

Default 8

# Axis.ticksComponent((tickRendererProps: TicksRendererProps<Scale>) => ReactNode) | undefinedoptional

Override the component used to render all tick lines and labels.

# Axis.tickStrokestring | undefinedoptional

The color for the tick's stroke value.

# Axis.tickTransformstring | undefinedoptional

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

# Axis.tickValuesParameters<Scale>[0][] | undefinedoptional

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

# Axis.topnumber | undefinedoptional

A top pixel offset applied to the entire axis.

Default 0

#<AxisBottom />

# AxisBottom.scaleScalerequired

A d3 or vx scale function.

# AxisBottom.axisClassNamestring | undefinedoptional

The class name applied to the outermost axis group element.

# AxisBottom.axisLineClassNamestring | undefinedoptional

The class name applied to the axis line element.

# AxisBottom.children((renderProps: AxisRendererProps<Scale>) => ReactNode) | undefinedoptional

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

# AxisBottom.hideAxisLineboolean | undefinedoptional

If true, will hide the axis line.

# AxisBottom.hideTicksboolean | undefinedoptional

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

# AxisBottom.hideZeroboolean | undefinedoptional

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

# AxisBottom.labelstring | undefinedoptional

The text for the axis label.

# AxisBottom.labelClassNamestring | undefinedoptional

The class name applied to the axis label text element.

# AxisBottom.labelOffsetnumber | undefinedoptional

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

Default 8

# AxisBottom.labelPropsPartial<TextProps> | undefinedoptional

Props applied to the axis label component.

# AxisBottom.leftnumber | undefinedoptional

A left pixel offset applied to the entire axis.

# AxisBottom.numTicksnumber | undefinedoptional

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

# AxisBottom.orientation"top" | "left" | "right" | "bottom" | undefinedoptional

Placement of the axis

# AxisBottom.rangePaddingnumber | undefinedoptional

Pixel padding to apply to both sides of the axis.

# AxisBottom.strokestring | undefinedoptional

The color for the stroke of the lines.

# AxisBottom.strokeDasharraystring | undefinedoptional

The pattern of dashes in the stroke.

# AxisBottom.strokeWidthnumber | undefinedoptional

The pixel value for the width of the lines.

# AxisBottom.tickClassNamestring | undefinedoptional

The class name applied to each tick group.

# AxisBottom.tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefinedoptional

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

# AxisBottom.tickFormatTickFormatter<Parameters<Scale>[0]> | undefinedoptional

A d3 formatter for the tick text.

# AxisBottom.tickLabelPropsTickLabelProps<Parameters<Scale>[0]> | undefinedoptional

A function that returns props for a given tick label.

# AxisBottom.tickLengthnumber | undefinedoptional

The length of the tick lines.

Default 8

# AxisBottom.ticksComponent((tickRendererProps: TicksRendererProps<Scale>) => ReactNode) | undefinedoptional

Override the component used to render all tick lines and labels.

# AxisBottom.tickStrokestring | undefinedoptional

The color for the tick's stroke value.

# AxisBottom.tickTransformstring | undefinedoptional

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

# AxisBottom.tickValuesParameters<Scale>[0][] | undefinedoptional

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

# AxisBottom.topnumber | undefinedoptional

A top pixel offset applied to the entire axis.

#<AxisLeft />

# AxisLeft.scaleScalerequired

A d3 or vx scale function.

# AxisLeft.axisClassNamestring | undefinedoptional

The class name applied to the outermost axis group element.

# AxisLeft.axisLineClassNamestring | undefinedoptional

The class name applied to the axis line element.

# AxisLeft.children((renderProps: AxisRendererProps<Scale>) => ReactNode) | undefinedoptional

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

# AxisLeft.hideAxisLineboolean | undefinedoptional

If true, will hide the axis line.

# AxisLeft.hideTicksboolean | undefinedoptional

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

# AxisLeft.hideZeroboolean | undefinedoptional

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

# AxisLeft.labelstring | undefinedoptional

The text for the axis label.

# AxisLeft.labelClassNamestring | undefinedoptional

The class name applied to the axis label text element.

# AxisLeft.labelOffsetnumber | undefinedoptional

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

Default 36

# AxisLeft.labelPropsPartial<TextProps> | undefinedoptional

Props applied to the axis label component.

# AxisLeft.leftnumber | undefinedoptional

A left pixel offset applied to the entire axis.

# AxisLeft.numTicksnumber | undefinedoptional

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

# AxisLeft.orientation"top" | "left" | "right" | "bottom" | undefinedoptional

Placement of the axis

# AxisLeft.rangePaddingnumber | undefinedoptional

Pixel padding to apply to both sides of the axis.

# AxisLeft.strokestring | undefinedoptional

The color for the stroke of the lines.

# AxisLeft.strokeDasharraystring | undefinedoptional

The pattern of dashes in the stroke.

# AxisLeft.strokeWidthnumber | undefinedoptional

The pixel value for the width of the lines.

# AxisLeft.tickClassNamestring | undefinedoptional

The class name applied to each tick group.

# AxisLeft.tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefinedoptional

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

# AxisLeft.tickFormatTickFormatter<Parameters<Scale>[0]> | undefinedoptional

A d3 formatter for the tick text.

# AxisLeft.tickLabelPropsTickLabelProps<Parameters<Scale>[0]> | undefinedoptional

A function that returns props for a given tick label.

# AxisLeft.tickLengthnumber | undefinedoptional

The length of the tick lines.

Default 8

# AxisLeft.ticksComponent((tickRendererProps: TicksRendererProps<Scale>) => ReactNode) | undefinedoptional

Override the component used to render all tick lines and labels.

# AxisLeft.tickStrokestring | undefinedoptional

The color for the tick's stroke value.

# AxisLeft.tickTransformstring | undefinedoptional

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

# AxisLeft.tickValuesParameters<Scale>[0][] | undefinedoptional

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

# AxisLeft.topnumber | undefinedoptional

A top pixel offset applied to the entire axis.

#<AxisRight />

# AxisRight.scaleScalerequired

A d3 or vx scale function.

# AxisRight.axisClassNamestring | undefinedoptional

The class name applied to the outermost axis group element.

# AxisRight.axisLineClassNamestring | undefinedoptional

The class name applied to the axis line element.

# AxisRight.children((renderProps: AxisRendererProps<Scale>) => ReactNode) | undefinedoptional

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

# AxisRight.hideAxisLineboolean | undefinedoptional

If true, will hide the axis line.

# AxisRight.hideTicksboolean | undefinedoptional

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

# AxisRight.hideZeroboolean | undefinedoptional

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

# AxisRight.labelstring | undefinedoptional

The text for the axis label.

# AxisRight.labelClassNamestring | undefinedoptional

The class name applied to the axis label text element.

# AxisRight.labelOffsetnumber | undefinedoptional

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

Default 36

# AxisRight.labelPropsPartial<TextProps> | undefinedoptional

Props applied to the axis label component.

# AxisRight.leftnumber | undefinedoptional

A left pixel offset applied to the entire axis.

# AxisRight.numTicksnumber | undefinedoptional

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

# AxisRight.orientation"top" | "left" | "right" | "bottom" | undefinedoptional

Placement of the axis

# AxisRight.rangePaddingnumber | undefinedoptional

Pixel padding to apply to both sides of the axis.

# AxisRight.strokestring | undefinedoptional

The color for the stroke of the lines.

# AxisRight.strokeDasharraystring | undefinedoptional

The pattern of dashes in the stroke.

# AxisRight.strokeWidthnumber | undefinedoptional

The pixel value for the width of the lines.

# AxisRight.tickClassNamestring | undefinedoptional

The class name applied to each tick group.

# AxisRight.tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefinedoptional

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

# AxisRight.tickFormatTickFormatter<Parameters<Scale>[0]> | undefinedoptional

A d3 formatter for the tick text.

# AxisRight.tickLabelPropsTickLabelProps<Parameters<Scale>[0]> | undefinedoptional

A function that returns props for a given tick label.

# AxisRight.tickLengthnumber | undefinedoptional

The length of the tick lines.

Default 8

# AxisRight.ticksComponent((tickRendererProps: TicksRendererProps<Scale>) => ReactNode) | undefinedoptional

Override the component used to render all tick lines and labels.

# AxisRight.tickStrokestring | undefinedoptional

The color for the tick's stroke value.

# AxisRight.tickTransformstring | undefinedoptional

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

# AxisRight.tickValuesParameters<Scale>[0][] | undefinedoptional

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

# AxisRight.topnumber | undefinedoptional

A top pixel offset applied to the entire axis.

#<AxisTop />

# AxisTop.scaleScalerequired

A d3 or vx scale function.

# AxisTop.axisClassNamestring | undefinedoptional

The class name applied to the outermost axis group element.

# AxisTop.axisLineClassNamestring | undefinedoptional

The class name applied to the axis line element.

# AxisTop.children((renderProps: AxisRendererProps<Scale>) => ReactNode) | undefinedoptional

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

# AxisTop.hideAxisLineboolean | undefinedoptional

If true, will hide the axis line.

# AxisTop.hideTicksboolean | undefinedoptional

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

# AxisTop.hideZeroboolean | undefinedoptional

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

# AxisTop.labelstring | undefinedoptional

The text for the axis label.

# AxisTop.labelClassNamestring | undefinedoptional

The class name applied to the axis label text element.

# AxisTop.labelOffsetnumber | undefinedoptional

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

Default 8

# AxisTop.labelPropsPartial<TextProps> | undefinedoptional

Props applied to the axis label component.

# AxisTop.leftnumber | undefinedoptional

A left pixel offset applied to the entire axis.

# AxisTop.numTicksnumber | undefinedoptional

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

# AxisTop.orientation"top" | "left" | "right" | "bottom" | undefinedoptional

Placement of the axis

# AxisTop.rangePaddingnumber | undefinedoptional

Pixel padding to apply to both sides of the axis.

# AxisTop.strokestring | undefinedoptional

The color for the stroke of the lines.

# AxisTop.strokeDasharraystring | undefinedoptional

The pattern of dashes in the stroke.

# AxisTop.strokeWidthnumber | undefinedoptional

The pixel value for the width of the lines.

# AxisTop.tickClassNamestring | undefinedoptional

The class name applied to each tick group.

# AxisTop.tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefinedoptional

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

# AxisTop.tickFormatTickFormatter<Parameters<Scale>[0]> | undefinedoptional

A d3 formatter for the tick text.

# AxisTop.tickLabelPropsTickLabelProps<Parameters<Scale>[0]> | undefinedoptional

A function that returns props for a given tick label.

# AxisTop.tickLengthnumber | undefinedoptional

The length of the tick lines.

Default 8

# AxisTop.ticksComponent((tickRendererProps: TicksRendererProps<Scale>) => ReactNode) | undefinedoptional

Override the component used to render all tick lines and labels.

# AxisTop.tickStrokestring | undefinedoptional

The color for the tick's stroke value.

# AxisTop.tickTransformstring | undefinedoptional

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

# AxisTop.tickValuesParameters<Scale>[0][] | undefinedoptional

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

# AxisTop.topnumber | undefinedoptional

A top pixel offset applied to the entire axis.

vx
made by @hshoff