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
<Axis.AxisBottom />
<Shape.BarStack />
<Threshold />
APIs
#<Axis />
string
The class name applied to the outermost axis group element.
string
The class name applied to the axis line element.
(renderProps: AxisRendererProps<Scale>) => ReactNode
For more control over rendering or to add event handlers to datum, pass a function as children.
boolean
If true, will hide the axis line.
Default false
boolean
If true, will hide the ticks (but not the tick labels).
Default false
boolean
If true, will hide the '0' value tick and tick label.
Default false
string
The text for the axis label.
string
The class name applied to the axis label text element.
number
Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)
Partial<TextProps>
Props applied to the axis label component.
number
A left pixel offset applied to the entire axis.
Default 0
number
The number of ticks wanted for the axis (note this is approximate)
Default 10
"top" | "left" | "right" | "bottom"
Placement of the axis
Default Orientation.bottom
number | { start?: number; end?: number; }
Pixel padding to apply to axis sides.
Default 0
string
The color for the stroke of the lines.
string
The pattern of dashes in the stroke.
ReactText
The pixel value for the width of the lines.
string
The class name applied to each tick group.
(tickRendererProps: TickRendererProps) => ReactNode
Override the component used to render tick labels (instead of <Text /> from @visx/text).
TickFormatter<ScaleInput<Scale>>
A d3 formatter for the tick text.
TickLabelProps<ScaleInput<Scale>>
Either an object with the props for all tick labels or a function that returns props for a given tick label.
number
The length of the tick lines.
Default 8
Pick<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.
(tickRendererProps: TicksRendererProps<Scale>) => ReactNode
Override the component used to render all tick lines and labels.
string
The color for the tick's stroke value.
string
A custom SVG transform value to be applied to each tick group.
ScaleInput<Scale>[]
An array of values that determine the number and values of the ticks. Falls back to scale.ticks()
or .domain()
.
number
A top pixel offset applied to the entire axis.
Default 0
#<AxisBottom />
string
The class name applied to the outermost axis group element.
string
The class name applied to the axis line element.
(renderProps: AxisRendererProps<Scale>) => ReactNode
For more control over rendering or to add event handlers to datum, pass a function as children.
boolean
If true, will hide the axis line.
boolean
If true, will hide the ticks (but not the tick labels).
boolean
If true, will hide the '0' value tick and tick label.
string
The text for the axis label.
string
The class name applied to the axis label text element.
number
Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)
Default 8
Partial<TextProps>
Props applied to the axis label component.
number
A left pixel offset applied to the entire axis.
number
The number of ticks wanted for the axis (note this is approximate)
"top" | "left" | "right" | "bottom"
Placement of the axis
number | { start?: number; end?: number; }
Pixel padding to apply to axis sides.
string
The color for the stroke of the lines.
string
The pattern of dashes in the stroke.
ReactText
The pixel value for the width of the lines.
string
The class name applied to each tick group.
(tickRendererProps: TickRendererProps) => ReactNode
Override the component used to render tick labels (instead of <Text /> from @visx/text).
TickFormatter<ScaleInput<Scale>>
A d3 formatter for the tick text.
TickLabelProps<ScaleInput<Scale>>
Either an object with the props for all tick labels or a function that returns props for a given tick label.
number
The length of the tick lines.
Default 8
Pick<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.
(tickRendererProps: TicksRendererProps<Scale>) => ReactNode
Override the component used to render all tick lines and labels.
string
The color for the tick's stroke value.
string
A custom SVG transform value to be applied to each tick group.
ScaleInput<Scale>[]
An array of values that determine the number and values of the ticks. Falls back to scale.ticks()
or .domain()
.
number
A top pixel offset applied to the entire axis.
#<AxisLeft />
string
The class name applied to the outermost axis group element.
string
The class name applied to the axis line element.
(renderProps: AxisRendererProps<Scale>) => ReactNode
For more control over rendering or to add event handlers to datum, pass a function as children.
boolean
If true, will hide the axis line.
boolean
If true, will hide the ticks (but not the tick labels).
boolean
If true, will hide the '0' value tick and tick label.
string
The text for the axis label.
string
The class name applied to the axis label text element.
number
Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)
Default 36
Partial<TextProps>
Props applied to the axis label component.
number
A left pixel offset applied to the entire axis.
number
The number of ticks wanted for the axis (note this is approximate)
"top" | "left" | "right" | "bottom"
Placement of the axis
number | { start?: number; end?: number; }
Pixel padding to apply to axis sides.
string
The color for the stroke of the lines.
string
The pattern of dashes in the stroke.
ReactText
The pixel value for the width of the lines.
string
The class name applied to each tick group.
(tickRendererProps: TickRendererProps) => ReactNode
Override the component used to render tick labels (instead of <Text /> from @visx/text).
TickFormatter<ScaleInput<Scale>>
A d3 formatter for the tick text.
TickLabelProps<ScaleInput<Scale>>
Either an object with the props for all tick labels or a function that returns props for a given tick label.
number
The length of the tick lines.
Default 8
Pick<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.
(tickRendererProps: TicksRendererProps<Scale>) => ReactNode
Override the component used to render all tick lines and labels.
string
The color for the tick's stroke value.
string
A custom SVG transform value to be applied to each tick group.
ScaleInput<Scale>[]
An array of values that determine the number and values of the ticks. Falls back to scale.ticks()
or .domain()
.
number
A top pixel offset applied to the entire axis.
#<AxisRight />
string
The class name applied to the outermost axis group element.
string
The class name applied to the axis line element.
(renderProps: AxisRendererProps<Scale>) => ReactNode
For more control over rendering or to add event handlers to datum, pass a function as children.
boolean
If true, will hide the axis line.
boolean
If true, will hide the ticks (but not the tick labels).
boolean
If true, will hide the '0' value tick and tick label.
string
The text for the axis label.
string
The class name applied to the axis label text element.
number
Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)
Default 36
Partial<TextProps>
Props applied to the axis label component.
number
A left pixel offset applied to the entire axis.
number
The number of ticks wanted for the axis (note this is approximate)
"top" | "left" | "right" | "bottom"
Placement of the axis
number | { start?: number; end?: number; }
Pixel padding to apply to axis sides.
string
The color for the stroke of the lines.
string
The pattern of dashes in the stroke.
ReactText
The pixel value for the width of the lines.
string
The class name applied to each tick group.
(tickRendererProps: TickRendererProps) => ReactNode
Override the component used to render tick labels (instead of <Text /> from @visx/text).
TickFormatter<ScaleInput<Scale>>
A d3 formatter for the tick text.
TickLabelProps<ScaleInput<Scale>>
Either an object with the props for all tick labels or a function that returns props for a given tick label.
number
The length of the tick lines.
Default 8
Pick<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.
(tickRendererProps: TicksRendererProps<Scale>) => ReactNode
Override the component used to render all tick lines and labels.
string
The color for the tick's stroke value.
string
A custom SVG transform value to be applied to each tick group.
ScaleInput<Scale>[]
An array of values that determine the number and values of the ticks. Falls back to scale.ticks()
or .domain()
.
number
A top pixel offset applied to the entire axis.
#<AxisTop />
string
The class name applied to the outermost axis group element.
string
The class name applied to the axis line element.
(renderProps: AxisRendererProps<Scale>) => ReactNode
For more control over rendering or to add event handlers to datum, pass a function as children.
boolean
If true, will hide the axis line.
boolean
If true, will hide the ticks (but not the tick labels).
boolean
If true, will hide the '0' value tick and tick label.
string
The text for the axis label.
string
The class name applied to the axis label text element.
number
Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)
Default 8
Partial<TextProps>
Props applied to the axis label component.
number
A left pixel offset applied to the entire axis.
number
The number of ticks wanted for the axis (note this is approximate)
"top" | "left" | "right" | "bottom"
Placement of the axis
number | { start?: number; end?: number; }
Pixel padding to apply to axis sides.
string
The color for the stroke of the lines.
string
The pattern of dashes in the stroke.
ReactText
The pixel value for the width of the lines.
string
The class name applied to each tick group.
(tickRendererProps: TickRendererProps) => ReactNode
Override the component used to render tick labels (instead of <Text /> from @visx/text).
TickFormatter<ScaleInput<Scale>>
A d3 formatter for the tick text.
TickLabelProps<ScaleInput<Scale>>
Either an object with the props for all tick labels or a function that returns props for a given tick label.
number
The length of the tick lines.
Default 8
Pick<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.
(tickRendererProps: TicksRendererProps<Scale>) => ReactNode
Override the component used to render all tick lines and labels.
string
The color for the tick's stroke value.
string
A custom SVG transform value to be applied to each tick group.
ScaleInput<Scale>[]
An array of values that determine the number and values of the ticks. Falls back to scale.ticks()
or .domain()
.
number
A top pixel offset applied to the entire axis.