@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.
Installation
npm install --save @vx/axis
Components
API
<Axis />
# Axis.axisClassName<string>
# Axis.axisLineClassName<string>
# Axis.children<func>
# Axis.hideAxisLine<bool>
Default | false |
# Axis.hideTicks<bool>
Default | false |
# Axis.hideZero<bool>
Default | false |
# Axis.label<string>
Default | '' |
# Axis.labelClassName<string>
# Axis.labelOffset<number>
Default | 14 |
# Axis.labelProps<object>
Default | { textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: 'black' } |
# Axis.left<number>
Default | 0 |
# Axis.numTicks<number>
Default | 10 |
# Axis.orientation<enum(ORIENT.top|ORIENT.right|ORIENT.bottom|ORIENT.left)>
Default | ORIENT.bottom |
# Axis.rangePadding<number>
Default | 0 |
# Axis.scale<func> required
# Axis.stroke<string>
Default | 'black' |
# Axis.strokeDasharray<string>
# Axis.strokeWidth<number>
Default | 1 |
# Axis.tickClassName<string>
# Axis.tickComponent<func>
# Axis.tickFormat<func>
# Axis.tickLabelProps<func>
Default | (tickValue, index) => ({ textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, fill: 'black' }) |
# Axis.tickLength<number>
Default | 8 |
# Axis.tickStroke<string>
Default | 'black' |
# Axis.tickTransform<string>
# Axis.tickValues<array>
# Axis.top<number>
Default | 0 |
<AxisBottom />
# AxisBottom.axisClassName<string>
The class name applied to the outermost axis group element.
# AxisBottom.axisLineClassName<string>
The class name applied to the axis line element.
# AxisBottom.children<func>
For more control over rendering or to add event handlers to datum, pass a function as children.
# AxisBottom.hideAxisLine<bool>
If true, will hide the axis line.
# AxisBottom.hideTicks<bool>
If true, will hide the ticks (but not the tick labels).
# AxisBottom.hideZero<bool>
If true, will hide the '0' value tick and tick label.
# AxisBottom.label<string>
The text for the axis label.
# AxisBottom.labelClassName<string>
The class name applied to the axis label text element.
# AxisBottom.labelOffset<number>
Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)
Default | 8 |
# AxisBottom.labelProps<object>
Props applied to the axis label component.
# AxisBottom.left<number>
A left pixel offset applied to the entire axis.
# AxisBottom.numTicks<number>
The number of ticks wanted for the axis (note this is approximate)
# AxisBottom.rangePadding<number>
Pixel padding to apply to both sides of the axis.
# AxisBottom.scale<func> required
# AxisBottom.stroke<string>
The color for the stroke of the lines.
# AxisBottom.strokeDasharray<string>
The pattern of dashes in the stroke.
# AxisBottom.strokeWidth<number>
The pixel value for the width of the lines.
# AxisBottom.tickClassName<string>
The class name applied to each tick group.
# AxisBottom.tickComponent<func>
# AxisBottom.tickFormat<func>
A d3 formatter for the tick text.
# AxisBottom.tickLabelProps<func>
A function that returns props for a given tick label.
Default | (tickValue, index) => ({ dy: '0.25em', fill: 'black', fontFamily: 'Arial', fontSize: 10, textAnchor: 'middle' }) |
# AxisBottom.tickLength<number>
The length of the tick lines.
Default | 8 |
# AxisBottom.tickStroke<string>
The color for the tick's stroke value.
# AxisBottom.tickTransform<string>
A custom SVG transform value to be applied to each tick group.
# AxisBottom.tickValues<array>
An array of values that determine the number and values of the ticks. Falls back to scale.ticks()
or .domain()
.
# AxisBottom.top<number>
A top pixel offset applied to the entire axis.
<AxisLeft />
# AxisLeft.axisClassName<string>
# AxisLeft.axisLineClassName<string>
# AxisLeft.children<func>
# AxisLeft.hideAxisLine<bool>
# AxisLeft.hideTicks<bool>
# AxisLeft.hideZero<bool>
# AxisLeft.label<string>
# AxisLeft.labelClassName<string>
# AxisLeft.labelOffset<number>
Default | 36 |
# AxisLeft.labelProps<object>
# AxisLeft.left<number>
# AxisLeft.numTicks<number>
# AxisLeft.rangePadding<number>
# AxisLeft.scale<func> required
# AxisLeft.stroke<string>
# AxisLeft.strokeDasharray<string>
# AxisLeft.strokeWidth<number>
# AxisLeft.tickClassName<string>
# AxisLeft.tickComponent<func>
# AxisLeft.tickFormat<func>
# AxisLeft.tickLabelProps<func>
Default | (tickValue, index) => ({ dx: '-0.25em', dy: '0.25em', fill: 'black', fontFamily: 'Arial', fontSize: 10, textAnchor: 'end' }) |
# AxisLeft.tickLength<number>
Default | 8 |
# AxisLeft.tickStroke<string>
# AxisLeft.tickTransform<string>
# AxisLeft.tickValues<array>
# AxisLeft.top<number>
<AxisRight />
# AxisRight.axisClassName<string>
# AxisRight.axisLineClassName<string>
# AxisRight.children<func>
# AxisRight.hideAxisLine<bool>
# AxisRight.hideTicks<bool>
# AxisRight.hideZero<bool>
# AxisRight.label<string>
# AxisRight.labelClassName<string>
# AxisRight.labelOffset<number>
Default | 36 |
# AxisRight.labelProps<object>
# AxisRight.left<number>
# AxisRight.numTicks<number>
# AxisRight.rangePadding<number>
# AxisRight.scale<func> required
# AxisRight.stroke<string>
# AxisRight.strokeDasharray<string>
# AxisRight.strokeWidth<number>
# AxisRight.tickClassName<string>
# AxisRight.tickComponent<func>
# AxisRight.tickFormat<func>
# AxisRight.tickLabelProps<func>
Default | (tickValue, index) => ({ dx: '0.25em', dy: '0.25em', fill: 'black', fontFamily: 'Arial', fontSize: 10, textAnchor: 'start' }) |
# AxisRight.tickLength<number>
Default | 8 |
# AxisRight.tickStroke<string>
# AxisRight.tickTransform<string>
# AxisRight.tickValues<array>
# AxisRight.top<number>
<AxisTop />
# AxisTop.axisClassName<string>
# AxisTop.axisLineClassName<string>
# AxisTop.children<func>
# AxisTop.hideAxisLine<bool>
# AxisTop.hideTicks<bool>
# AxisTop.hideZero<bool>
# AxisTop.label<string>
# AxisTop.labelClassName<string>
# AxisTop.labelOffset<number>
Default | 8 |
# AxisTop.labelProps<object>
# AxisTop.left<number>
# AxisTop.numTicks<number>
# AxisTop.rangePadding<number>
# AxisTop.scale<func> required
# AxisTop.stroke<string>
# AxisTop.strokeDasharray<string>
# AxisTop.strokeWidth<number>
# AxisTop.tickClassName<string>
# AxisTop.tickComponent<func>
# AxisTop.tickFormat<func>
# AxisTop.tickLabelProps<func>
Default | (tickValue, index) => ({ dy: '-0.25em', fill: 'black', fontFamily: 'Arial', fontSize: 10, textAnchor: 'middle' }) |
# AxisTop.tickLength<number>
Default | 8 |
# AxisTop.tickStroke<string>
# AxisTop.tickTransform<string>
# AxisTop.tickValues<array>
# AxisTop.top<number>