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