@vx/axis

npm install --save @vx/axis

An axis is a line with ticks that helps you label your graphs.

You can use one of the 4 pre-made axes or you can create your own based on the <Axis /> element.

Example

Axis Example

import { AxisBottom, AxisLeft } from '@vx/axis';
// or
// import * as Axis from '@vx/axis';
// <Axis.AxisBottom />

const axis = (
  <AxisBottom
    scale={xScale}
    top={yMax + margin.top}
    left={margin.left}
    label={'My string label'}
    stroke={'#1b1a1e'}
    tickTextFill={'#1b1a1e'}
  />
  <AxisLeft
    scale={yScale}
    top={margin.top}
    left={margin.left}
    label={<text {...labelStyles}>My component label</text>}
    stroke={'#1b1a1e'}
    tickTextFill={'#1b1a1e'}
  />
);

<AxisTop/>

Name Default Type Description
scale function A d3 scale function.
top number A pixel value for the top margin.
left number A pixel value for the top margin.
stroke string The color for the stroke of the lines.
strokeWidth number The pixel value for the width of the lines.
strokeDasharray array The pattern of dashes in the stroke.
label string or node The text for the axis label, or a label component
numTicks 10 number The number of ticks wanted for the axis.
tickFormat function A d3 formatter for the tick text.
tickStroke black string The color for the tick's stroke value.
tickValues Array An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
tickK -1 number A value that determines an offset in the tick position.
tickOffset number A value that determines the y offset in the tick position.
tickTransform string A custom SVG transform value to be applied to the ticks.
tickLength 8 number The length of the tick lines.
tickPadding 2 number The padding between the ticks and their labels.
tickTextAnchor "middle" string The textAnchor value for the tick's text.
tickTextFontFamily "Arial" string The font for the ticks.
tickTextFontSize 10 number The font size for the ticks.
tickTextFill black string The text fill color for the tick's text.
tickTextDy number The y offset to the tick's text.
tickTextDx number The x offset to the tick's text.
hideAxisLine false bool If true, will hide the axis line.
hideTicks false bool If true, will hide the ticks.
hideZero false bool If true, will hide '0' values.
className string The class name applied to the axis group element.

<AxisBottom/>

Name Default Type Description
scale function A d3 scale function.
top number A pixel value for the top margin.
left number A pixel value for the top margin.
stroke string The color for the stroke of the lines.
strokeWidth number The pixel value for the width of the lines.
strokeDasharray array The pattern of dashes in the stroke.
label string The text for the axis label.
numTicks 10 number The number of ticks wanted for the axis.
tickFormat function A d3 formatter for the tick text.
tickStroke black string The color for the tick's stroke value.
tickValues Array An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
tickK 1 number A value that determines an offset in the tick position.
tickOffset number A value that determines the y offset in the tick position.
tickTransform string A custom SVG transform value to be applied to the ticks.
tickLength 8 number The length of the tick lines.
tickPadding 2 number The padding between the ticks and their labels.
tickTextAnchor "middle" string The textAnchor value for the tick's text.
tickTextFontFamily "Arial" string The font for the ticks.
tickTextFontSize 10 number The font size for the ticks.
tickTextFill black string The text fill color for the tick's text.
tickTextDy number The y offset to the tick's text.
tickTextDx number The x offset to the tick's text.
hideAxisLine false bool If true, will hide the axis line.
hideTicks false bool If true, will hide the ticks.
hideZero false bool If true, will hide '0' values.
className string The class name applied to the axis group element.

<AxisLeft/>

Name Default Type Description
scale function A d3 scale function.
top number A pixel value for the top margin.
left number A pixel value for the top margin.
stroke string The color for the stroke of the lines.
strokeWidth number The pixel value for the width of the lines.
strokeDasharray array The pattern of dashes in the stroke.
label string The text for the axis label.
numTicks 10 number The number of ticks wanted for the axis.
tickFormat function A d3 formatter for the tick text.
tickStroke black string The color for the tick's stroke value.
tickValues Array An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
tickK -1 number A value that determines an offset in the tick position.
tickOffset number A value that determines the y offset in the tick position.
tickTransform string A custom SVG transform value to be applied to the ticks.
tickLength 8 number The length of the tick lines.
tickPadding 2 number The padding between the ticks and their labels.
tickTextAnchor "end" string The textAnchor value for the tick's text.
tickTextFontFamily "Arial" string The font for the ticks.
tickTextFontSize 10 number The font size for the ticks.
tickTextFill black string The text fill color for the tick's text.
tickTextDy number The y offset to the tick's text.
tickTextDx number The x offset to the tick's text.
hideAxisLine false bool If true, will hide the axis line.
hideTicks false bool If true, will hide the ticks.
hideZero false bool If true, will hide '0' values.
className string The class name applied to the axis group element.

<AxisRight/>

Name Default Type Description
scale function A d3 scale function.
top number A pixel value for the top margin.
left number A pixel value for the top margin.
stroke string The color for the stroke of the lines.
strokeWidth number The pixel value for the width of the lines.
strokeDasharray array The pattern of dashes in the stroke.
label string The text for the axis label.
numTicks 10 number The number of ticks wanted for the axis.
tickFormat function A d3 formatter for the tick text.
tickStroke black string The color for the tick's stroke value.
tickValues Array An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
tickK 1 number A value that determines an offset in the tick position.
tickOffset number A value that determines the y offset in the tick position.
tickTransform string A custom SVG transform value to be applied to the ticks.
tickLength 8 number The length of the tick lines.
tickPadding 2 number The padding between the ticks and their labels.
tickTextAnchor "start" string The textAnchor value for the tick's text.
tickTextFontFamily "Arial" string The font for the ticks.
tickTextFontSize 10 number The font size for the ticks.
tickTextFill black string The text fill color for the tick's text.
tickTextDy number The y offset to the tick's text.
tickTextDx number The x offset to the tick's text.
hideAxisLine false bool If true, will hide the axis line.
hideTicks false bool If true, will hide the ticks.
hideZero false bool If true, will hide '0' values.
className string The class name applied to the axis group element.

<Axis />

Name Default Type Description
scale function A d3 scale function.
orient string An orientation defined as 'top', 'bottom', 'left', or 'right'.
top number A pixel value for the top margin.
left number A pixel value for the top margin.
stroke string The color for the stroke of the lines.
strokeWidth number The pixel value for the width of the lines.
strokeDasharray array The pattern of dashes in the stroke.
label "default label" string The text for the axis label.
numTicks 10 number The number of ticks wanted for the axis.
tickFormat function A d3 formatter for the tick text.
tickStroke black string The color for the tick's stroke value.
tickValues Array An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
tickK 1 number A value that determines an offset in the tick position.
tickOffset number A value that determines the y offset in the tick position.
tickTransform string A custom SVG transform value to be applied to the ticks.
tickLength 8 number The length of the tick lines.
tickPadding 2 number The padding between the ticks and their labels.
tickTextAnchor "start" string The textAnchor value for the tick's text.
tickTextFontFamily "Arial" string The font for the ticks.
tickTextFontSize 10 number The font size for the ticks.
tickTextFill black string The text fill color for the tick's text.
tickTextDy number The y offset to the tick's text.
tickTextDx number The x offset to the tick's text.
hideAxisLine false bool If true, will hide the axis line.
hideTicks false bool If true, will hide the ticks.
hideZero false bool If true, will hide '0' values.
className string The class name applied to the axis group element.