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

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

Installation

npm install --save @visx/axis

Examples

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

APIs

#<Axis />

# scaleScalerequired

A d3 or visx scale function.

# axisClassNamestring | undefined

The class name applied to the outermost axis group element.

# axisLineClassNamestring | undefined

The class name applied to the axis line element.

# children((renderProps: AxisRendererProps<Scale>) => ReactNode) | undefined

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

# hideAxisLineboolean | undefined

If true, will hide the axis line.

Default false

# hideTicksboolean | undefined

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

Default false

# hideZeroboolean | undefined

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

Default false

# labelstring | undefined

The text for the axis label.

# labelClassNamestring | undefined

The class name applied to the axis label text element.

# labelOffsetnumber | undefined

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

# labelPropsPartial<TextProps> | undefined

Props applied to the axis label component.

# leftnumber | undefined

A left pixel offset applied to the entire axis.

Default 0

# numTicksnumber | undefined

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

Default 10

# orientation"left" | "top" | "bottom" | "right" | undefined

Placement of the axis

Default Orientation.bottom

# rangePaddingnumber | { start?: number | undefined; end?: number | undefined; } | undefined

Pixel padding to apply to axis sides.

Default 0

# strokestring | undefined

The color for the stroke of the lines.

# strokeDasharraystring | undefined

The pattern of dashes in the stroke.

# strokeWidthstring | number | undefined

The pixel value for the width of the lines.

# tickClassNamestring | undefined

The class name applied to each tick group.

# tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefined

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

# tickFormatTickFormatter<ScaleInput<Scale>> | undefined

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>> | undefined

A function that returns props for a given tick label.

# tickLengthnumber | undefined

The length of the tick lines.

Default 8

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "className" | "width" | "height" | "scale" | "color" | "id" | "lang" | "max" | "media" | "method" | ... 454 more ... | "key"> | undefined

Props to be applied to individual tick lines.

# ticksComponent((tickRendererProps: TicksRendererProps<Scale>) => ReactNode) | undefined

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

# tickStrokestring | undefined

The color for the tick's stroke value.

# tickTransformstring | undefined

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

# tickValuesScaleInput<Scale>[] | undefined

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

# topnumber | undefined

A top pixel offset applied to the entire axis.

Default 0

#<AxisBottom />

# scaleScalerequired

A d3 or visx scale function.

# axisClassNamestring | undefined

The class name applied to the outermost axis group element.

# axisLineClassNamestring | undefined

The class name applied to the axis line element.

# children((renderProps: AxisRendererProps<Scale>) => ReactNode) | undefined

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

# hideAxisLineboolean | undefined

If true, will hide the axis line.

# hideTicksboolean | undefined

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

# hideZeroboolean | undefined

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

# labelstring | undefined

The text for the axis label.

# labelClassNamestring | undefined

The class name applied to the axis label text element.

# labelOffsetnumber | undefined

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

Default 8

# labelPropsPartial<TextProps> | undefined

Props applied to the axis label component.

# leftnumber | undefined

A left pixel offset applied to the entire axis.

# numTicksnumber | undefined

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

# orientation"left" | "top" | "bottom" | "right" | undefined

Placement of the axis

# rangePaddingnumber | { start?: number | undefined; end?: number | undefined; } | undefined

Pixel padding to apply to axis sides.

# strokestring | undefined

The color for the stroke of the lines.

# strokeDasharraystring | undefined

The pattern of dashes in the stroke.

# strokeWidthstring | number | undefined

The pixel value for the width of the lines.

# tickClassNamestring | undefined

The class name applied to each tick group.

# tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefined

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

# tickFormatTickFormatter<ScaleInput<Scale>> | undefined

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>> | undefined

A function that returns props for a given tick label.

# tickLengthnumber | undefined

The length of the tick lines.

Default 8

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "className" | "width" | "height" | "scale" | "color" | "id" | "lang" | "max" | "media" | "method" | ... 454 more ... | "key"> | undefined

Props to be applied to individual tick lines.

# ticksComponent((tickRendererProps: TicksRendererProps<Scale>) => ReactNode) | undefined

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

# tickStrokestring | undefined

The color for the tick's stroke value.

# tickTransformstring | undefined

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

# tickValuesScaleInput<Scale>[] | undefined

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

# topnumber | undefined

A top pixel offset applied to the entire axis.

#<AxisLeft />

# scaleScalerequired

A d3 or visx scale function.

# axisClassNamestring | undefined

The class name applied to the outermost axis group element.

# axisLineClassNamestring | undefined

The class name applied to the axis line element.

# children((renderProps: AxisRendererProps<Scale>) => ReactNode) | undefined

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

# hideAxisLineboolean | undefined

If true, will hide the axis line.

# hideTicksboolean | undefined

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

# hideZeroboolean | undefined

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

# labelstring | undefined

The text for the axis label.

# labelClassNamestring | undefined

The class name applied to the axis label text element.

# labelOffsetnumber | undefined

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

Default 36

# labelPropsPartial<TextProps> | undefined

Props applied to the axis label component.

# leftnumber | undefined

A left pixel offset applied to the entire axis.

# numTicksnumber | undefined

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

# orientation"left" | "top" | "bottom" | "right" | undefined

Placement of the axis

# rangePaddingnumber | { start?: number | undefined; end?: number | undefined; } | undefined

Pixel padding to apply to axis sides.

# strokestring | undefined

The color for the stroke of the lines.

# strokeDasharraystring | undefined

The pattern of dashes in the stroke.

# strokeWidthstring | number | undefined

The pixel value for the width of the lines.

# tickClassNamestring | undefined

The class name applied to each tick group.

# tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefined

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

# tickFormatTickFormatter<ScaleInput<Scale>> | undefined

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>> | undefined

A function that returns props for a given tick label.

# tickLengthnumber | undefined

The length of the tick lines.

Default 8

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "className" | "width" | "height" | "scale" | "color" | "id" | "lang" | "max" | "media" | "method" | ... 454 more ... | "key"> | undefined

Props to be applied to individual tick lines.

# ticksComponent((tickRendererProps: TicksRendererProps<Scale>) => ReactNode) | undefined

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

# tickStrokestring | undefined

The color for the tick's stroke value.

# tickTransformstring | undefined

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

# tickValuesScaleInput<Scale>[] | undefined

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

# topnumber | undefined

A top pixel offset applied to the entire axis.

#<AxisRight />

# scaleScalerequired

A d3 or visx scale function.

# axisClassNamestring | undefined

The class name applied to the outermost axis group element.

# axisLineClassNamestring | undefined

The class name applied to the axis line element.

# children((renderProps: AxisRendererProps<Scale>) => ReactNode) | undefined

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

# hideAxisLineboolean | undefined

If true, will hide the axis line.

# hideTicksboolean | undefined

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

# hideZeroboolean | undefined

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

# labelstring | undefined

The text for the axis label.

# labelClassNamestring | undefined

The class name applied to the axis label text element.

# labelOffsetnumber | undefined

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

Default 36

# labelPropsPartial<TextProps> | undefined

Props applied to the axis label component.

# leftnumber | undefined

A left pixel offset applied to the entire axis.

# numTicksnumber | undefined

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

# orientation"left" | "top" | "bottom" | "right" | undefined

Placement of the axis

# rangePaddingnumber | { start?: number | undefined; end?: number | undefined; } | undefined

Pixel padding to apply to axis sides.

# strokestring | undefined

The color for the stroke of the lines.

# strokeDasharraystring | undefined

The pattern of dashes in the stroke.

# strokeWidthstring | number | undefined

The pixel value for the width of the lines.

# tickClassNamestring | undefined

The class name applied to each tick group.

# tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefined

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

# tickFormatTickFormatter<ScaleInput<Scale>> | undefined

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>> | undefined

A function that returns props for a given tick label.

# tickLengthnumber | undefined

The length of the tick lines.

Default 8

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "className" | "width" | "height" | "scale" | "color" | "id" | "lang" | "max" | "media" | "method" | ... 454 more ... | "key"> | undefined

Props to be applied to individual tick lines.

# ticksComponent((tickRendererProps: TicksRendererProps<Scale>) => ReactNode) | undefined

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

# tickStrokestring | undefined

The color for the tick's stroke value.

# tickTransformstring | undefined

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

# tickValuesScaleInput<Scale>[] | undefined

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

# topnumber | undefined

A top pixel offset applied to the entire axis.

#<AxisTop />

# scaleScalerequired

A d3 or visx scale function.

# axisClassNamestring | undefined

The class name applied to the outermost axis group element.

# axisLineClassNamestring | undefined

The class name applied to the axis line element.

# children((renderProps: AxisRendererProps<Scale>) => ReactNode) | undefined

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

# hideAxisLineboolean | undefined

If true, will hide the axis line.

# hideTicksboolean | undefined

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

# hideZeroboolean | undefined

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

# labelstring | undefined

The text for the axis label.

# labelClassNamestring | undefined

The class name applied to the axis label text element.

# labelOffsetnumber | undefined

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

Default 8

# labelPropsPartial<TextProps> | undefined

Props applied to the axis label component.

# leftnumber | undefined

A left pixel offset applied to the entire axis.

# numTicksnumber | undefined

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

# orientation"left" | "top" | "bottom" | "right" | undefined

Placement of the axis

# rangePaddingnumber | { start?: number | undefined; end?: number | undefined; } | undefined

Pixel padding to apply to axis sides.

# strokestring | undefined

The color for the stroke of the lines.

# strokeDasharraystring | undefined

The pattern of dashes in the stroke.

# strokeWidthstring | number | undefined

The pixel value for the width of the lines.

# tickClassNamestring | undefined

The class name applied to each tick group.

# tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefined

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

# tickFormatTickFormatter<ScaleInput<Scale>> | undefined

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>> | undefined

A function that returns props for a given tick label.

# tickLengthnumber | undefined

The length of the tick lines.

Default 8

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "className" | "width" | "height" | "scale" | "color" | "id" | "lang" | "max" | "media" | "method" | ... 454 more ... | "key"> | undefined

Props to be applied to individual tick lines.

# ticksComponent((tickRendererProps: TicksRendererProps<Scale>) => ReactNode) | undefined

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

# tickStrokestring | undefined

The color for the tick's stroke value.

# tickTransformstring | undefined

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

# tickValuesScaleInput<Scale>[] | undefined

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

# topnumber | undefined

A top pixel offset applied to the entire axis.

Exports