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

The class name applied to the outermost axis group element.

# axisLineClassNamestring

The class name applied to the axis line element.

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

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

# hideAxisLineboolean

If true, will hide the axis line.

Default false

# hideTicksboolean

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

Default false

# hideZeroboolean

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

Default false

# labelstring

The text for the axis label.

# labelClassNamestring

The class name applied to the axis label text element.

# labelOffsetnumber

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

# labelPropsPartial<TextProps>

Props applied to the axis label component.

# leftnumber

A left pixel offset applied to the entire axis.

Default 0

# numTicksnumber

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

Default 10

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

Placement of the axis

Default Orientation.bottom

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

Pixel padding to apply to axis sides.

Default 0

# strokestring

The color for the stroke of the lines.

# strokeDasharraystring

The pattern of dashes in the stroke.

# strokeWidthReactText

The pixel value for the width of the lines.

# tickClassNamestring

The class name applied to each tick group.

# tickComponent(tickRendererProps: TickRendererProps) => ReactNode

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

# tickFormatTickFormatter<ScaleInput<Scale>>

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>>

Either an object with the props for all tick labels or a function that returns props for a given tick label.

# tickLengthnumber

The length of the tick lines.

Default 8

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | "color" | ... 453 more ... | "key">

Props to be applied to individual tick lines.

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

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

# tickStrokestring

The color for the tick's stroke value.

# tickTransformstring

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

# tickValuesScaleInput<Scale>[]

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

# topnumber

A top pixel offset applied to the entire axis.

Default 0

#<AxisBottom />

# scaleScalerequired

A d3 or visx scale function.

# axisClassNamestring

The class name applied to the outermost axis group element.

# axisLineClassNamestring

The class name applied to the axis line element.

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

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

# hideAxisLineboolean

If true, will hide the axis line.

# hideTicksboolean

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

# hideZeroboolean

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

# labelstring

The text for the axis label.

# labelClassNamestring

The class name applied to the axis label text element.

# labelOffsetnumber

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

Default 8

# labelPropsPartial<TextProps>

Props applied to the axis label component.

# leftnumber

A left pixel offset applied to the entire axis.

# numTicksnumber

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

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

Placement of the axis

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

Pixel padding to apply to axis sides.

# strokestring

The color for the stroke of the lines.

# strokeDasharraystring

The pattern of dashes in the stroke.

# strokeWidthReactText

The pixel value for the width of the lines.

# tickClassNamestring

The class name applied to each tick group.

# tickComponent(tickRendererProps: TickRendererProps) => ReactNode

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

# tickFormatTickFormatter<ScaleInput<Scale>>

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>>

Either an object with the props for all tick labels or a function that returns props for a given tick label.

# tickLengthnumber

The length of the tick lines.

Default 8

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | "color" | ... 453 more ... | "key">

Props to be applied to individual tick lines.

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

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

# tickStrokestring

The color for the tick's stroke value.

# tickTransformstring

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

# tickValuesScaleInput<Scale>[]

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

# topnumber

A top pixel offset applied to the entire axis.

#<AxisLeft />

# scaleScalerequired

A d3 or visx scale function.

# axisClassNamestring

The class name applied to the outermost axis group element.

# axisLineClassNamestring

The class name applied to the axis line element.

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

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

# hideAxisLineboolean

If true, will hide the axis line.

# hideTicksboolean

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

# hideZeroboolean

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

# labelstring

The text for the axis label.

# labelClassNamestring

The class name applied to the axis label text element.

# labelOffsetnumber

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

Default 36

# labelPropsPartial<TextProps>

Props applied to the axis label component.

# leftnumber

A left pixel offset applied to the entire axis.

# numTicksnumber

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

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

Placement of the axis

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

Pixel padding to apply to axis sides.

# strokestring

The color for the stroke of the lines.

# strokeDasharraystring

The pattern of dashes in the stroke.

# strokeWidthReactText

The pixel value for the width of the lines.

# tickClassNamestring

The class name applied to each tick group.

# tickComponent(tickRendererProps: TickRendererProps) => ReactNode

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

# tickFormatTickFormatter<ScaleInput<Scale>>

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>>

Either an object with the props for all tick labels or a function that returns props for a given tick label.

# tickLengthnumber

The length of the tick lines.

Default 8

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | "color" | ... 453 more ... | "key">

Props to be applied to individual tick lines.

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

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

# tickStrokestring

The color for the tick's stroke value.

# tickTransformstring

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

# tickValuesScaleInput<Scale>[]

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

# topnumber

A top pixel offset applied to the entire axis.

#<AxisRight />

# scaleScalerequired

A d3 or visx scale function.

# axisClassNamestring

The class name applied to the outermost axis group element.

# axisLineClassNamestring

The class name applied to the axis line element.

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

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

# hideAxisLineboolean

If true, will hide the axis line.

# hideTicksboolean

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

# hideZeroboolean

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

# labelstring

The text for the axis label.

# labelClassNamestring

The class name applied to the axis label text element.

# labelOffsetnumber

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

Default 36

# labelPropsPartial<TextProps>

Props applied to the axis label component.

# leftnumber

A left pixel offset applied to the entire axis.

# numTicksnumber

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

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

Placement of the axis

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

Pixel padding to apply to axis sides.

# strokestring

The color for the stroke of the lines.

# strokeDasharraystring

The pattern of dashes in the stroke.

# strokeWidthReactText

The pixel value for the width of the lines.

# tickClassNamestring

The class name applied to each tick group.

# tickComponent(tickRendererProps: TickRendererProps) => ReactNode

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

# tickFormatTickFormatter<ScaleInput<Scale>>

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>>

Either an object with the props for all tick labels or a function that returns props for a given tick label.

# tickLengthnumber

The length of the tick lines.

Default 8

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | "color" | ... 453 more ... | "key">

Props to be applied to individual tick lines.

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

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

# tickStrokestring

The color for the tick's stroke value.

# tickTransformstring

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

# tickValuesScaleInput<Scale>[]

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

# topnumber

A top pixel offset applied to the entire axis.

#<AxisTop />

# scaleScalerequired

A d3 or visx scale function.

# axisClassNamestring

The class name applied to the outermost axis group element.

# axisLineClassNamestring

The class name applied to the axis line element.

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

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

# hideAxisLineboolean

If true, will hide the axis line.

# hideTicksboolean

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

# hideZeroboolean

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

# labelstring

The text for the axis label.

# labelClassNamestring

The class name applied to the axis label text element.

# labelOffsetnumber

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

Default 8

# labelPropsPartial<TextProps>

Props applied to the axis label component.

# leftnumber

A left pixel offset applied to the entire axis.

# numTicksnumber

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

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

Placement of the axis

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

Pixel padding to apply to axis sides.

# strokestring

The color for the stroke of the lines.

# strokeDasharraystring

The pattern of dashes in the stroke.

# strokeWidthReactText

The pixel value for the width of the lines.

# tickClassNamestring

The class name applied to each tick group.

# tickComponent(tickRendererProps: TickRendererProps) => ReactNode

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

# tickFormatTickFormatter<ScaleInput<Scale>>

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>>

Either an object with the props for all tick labels or a function that returns props for a given tick label.

# tickLengthnumber

The length of the tick lines.

Default 8

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | "color" | ... 453 more ... | "key">

Props to be applied to individual tick lines.

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

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

# tickStrokestring

The color for the tick's stroke value.

# tickTransformstring

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

# tickValuesScaleInput<Scale>[]

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

# topnumber

A top pixel offset applied to the entire axis.

Exports