VictoryAxis renders a single axis which can be used on its own or composed with VictoryChart.

<svg width={400} height={400}>
  <VictoryAxis crossAxis
    width={400}
    height={400}
    domain={[-10, 10]}
    theme={VictoryTheme.material}
    offsetY={200}
    standalone={false}
  />
  <VictoryAxis dependentAxis crossAxis
    width={400}
    height={400}
    domain={[-10, 10]}
    theme={VictoryTheme.material}
    offsetX={200}
    standalone={false}
  />
</svg>

type: boolean || object

VictoryAxis uses the standard animate prop. Read about it here

See the Animations Guide for more detail on animations

animate={{
  duration: 2000,
  easing: "bounce"
}}

type: element

The axisComponent prop takes a component instance which will be responsible for rendering an axis line. The new element created from the passed axisComponent will be provided with the following props calculated by VictoryAxis: x1, y1, x2, y2, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If an axisComponent is not provided, VictoryAxis will use its default LineSegment component.

default: axisComponent={<LineSegment type={"axis"}/>}

axisComponent={<LineSegment events={{ onClick: handleClick }}/>}

type: element

The axisLabelComponent prop takes a component instance which will be used to render the axis label. The new element created from the passed axisLabelComponent will be supplied with the following props: x, y, verticalAnchor, textAnchor, angle, transform, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If axisLabelComponent is omitted, a new VictoryLabel will be created with props described above.

default: axisLabelComponent={<VictoryLabel/>}

axisLabelComponent={<VictoryLabel dy={20}/>}

The axisValue prop may be used to position the dependent axis. This prop is useful when dependent axes should line up with values on the independent axis.

 <VictoryChart>
  <VictoryBar
    style={{ data: { fill: "tomato", width: 25 } }}
    data={[
      { x: "cat", y: 10 },
      { x: "dog", y: 25 },
      { x: "bird", y: 40 },
      { x: "frog", y: 50 },
      { x: "fish", y: 50 }
    ]}
  />
  <VictoryAxis />
  {
    ["cat", "dog", "bird", "dog", "frog", "fish"].map((d, i) => {
      return (
        <VictoryAxis dependentAxis
          key={i}
          label={d}
          style={{ tickLabels: { fill: "none" } }}
          axisValue={d}
        />
      );
    })
  }
</VictoryChart>

type: element

VictoryAxis uses the standard containerComponent prop. Read about it here

containerComponent={<VictoryZoomContainer zoomDimension="x"/>}

type: boolean

The crossAxis boolean prop specifies whether a given axis is intended to cross another axis. When this prop is true, zeroes will be removed from the array of ticks so that they do not clutter the origin of the chart.

Note: When VictoryAxis is nested within VictoryChart, VictoryChart will determine a value for the crossAxis prop based on domain, but this prop may be overridden by supplying a crossAxis prop directly to the VictoryAxis child component.

default: crossAxis={false} for standalone axes

type: boolean

The dependentAxis boolean prop specifies whether the axis corresponds to the dependent variable (usually y). This prop is useful when composing VictoryAxis with other components to form a chart.

default: dependentAxis={false}

<VictoryAxis dependentAxis />

type: array[low, high] || { x: [low, high], y: [low, high] }

VictoryAxis uses the standard domain prop. Read about it here

domain={{x: [0, 100], y: [0, 1]}}

type: number || array[left, right] || { x: [left, right], y: [bottom, top] }

VictoryAxis uses the standard domainPadding prop. Read about it here

domainPadding={{x: [10, -10], y: 5}}

type array[object]

VictoryAxis uses the standard events prop. Read about it here

See the Events Guide for more information on defining events.

note: valid event targets for VictoryAxis are "axis", "axisLabel", "grid", "ticks", and "tickLabels". Targets that correspond to only one element {"axis" and "axisLabel") should use the special eventKey "all".

type: array[object]

VictoryAxis uses the standard externalEventMutations prop. Read about it in detail

type: boolean

When true, this prop reduces the number of tick labels to fit the length of the axis. Labels are removed at approximately even intervals from the original array of labels. This feature only works well for labels that are approximately evenly spaced.

default: fixLabelOverlap={false}

type: element

The gridComponent prop takes a component instance which will be responsible for rendering a grid element. The new element created from the passed gridComponent will be provided with the following props calculated by VictoryAxis: x1, y1, x2, y2, tick, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a gridComponent is not provided, VictoryAxis will use its default LineSegment component.

default: gridComponent={<LineSegment type={"grid"}/>}

gridComponent={<LineSegment events={{ onClick: handleClick }}/>}

type: element

VictoryAxis uses the standard groupComponent prop. Read about it here

default: <g/>

groupComponent={<g transform="translate(10, 10)" />}

type: number

VictoryAxis uses the standard height prop. Read about it here

default (provided by default theme): height={300}

height={400}

type: boolean

The invertAxis boolean prop specifies whether the domain for a given axis should be inverted. By default, axes will be displayed with lower values on the bottom / left, and higher values on the top / right regardless of orientation.

default: invertAxis={false}

type: string

The label prop defines the label that will appear with the axis. This prop should be given as a string.

<VictoryAxis
  label="Time (ms)"
/>

type: number || { x: number, y: number }

VictoryAxis uses the standard maxDomain prop. Read about it in detail

<VictoryAxis
  tickValues={[2, 3, 4, 5]}
  maxDomain={{ x: 3 }}
/>

type: number || { x: number, y: number }

VictoryAxis uses the standard minDomain prop. Read about it in detail

<VictoryAxis
  tickValues={[2, 3, 4, 5]}
  minDomain={{ x: 0 }}
/>

type: string

VictoryAxis uses the standard name prop. Read about it here

name = "series-1";

type: number

The offsetX prop defines how far from the edge of its permitted area an axis should be offset in the x direction. If this prop is not given, the offset will be calculated based on font size, axis orientation, and label padding. When VictoryAxis is used with VictoryChart, VictoryChart will determine a value for offsetX that makes the axes line up correctly, but this value may be overridden by supplying an offsetX prop directly to the VictoryAxis child component.

note: The offsetX prop is relative to the edge corresponding to the orientation of the axis, e.g. the left edge when orientation="left".

<VictoryAxis dependentAxis
  offsetX={225}
/>

type: number

The offsetY prop defines how far from the edge of its permitted area an axis should be offset in the y direction. If this prop is not given, the offset will be calculated based on font size, axis orientation, and label padding. When VictoryAxis is used with VictoryChart, VictoryChart will determine a value for offsetY that makes the axes line up correctly, but this value may be overridden by supplying an offsetY prop directly to the VictoryAxis child component.

note: The offsetY prop is relative to the edge corresponding to the orientation of the axis, e.g. the bottom edge when orientation="bottom".

<VictoryAxis
  offsetY={150}
/>

type: "top" || "bottom" || "left" || "right"

The orientation prop specifies the position and orientation of your axis. Options are "top", "bottom", "left", and "right".

<VictoryAxis
  orientation="top"
/>

type: number || { top: number, bottom: number, left: number, right: number }

VictoryAxis uses the standard padding prop. Read about it here

default (provided by default theme): padding={50}

padding={{ top: 20, bottom: 60 }}

type: array[low, high] || { x: [low, high], y: [low, high] }

The range prop is usually controlled by VictoryChart. It will not typically be necessary to set a range prop manually

Read about the range prop in detail

type: scale || { x: scale, y: scale }

VictoryAxis uses the standard scale prop. Read about it here Options for scale include "linear", "time", "log", "sqrt" and the d3-scale functions that correspond to these options.

note: Though VictoryAxis can take a scale prop with scales defined for both x and y, only the scale that corresponds the given axis will be used.

default: scale="linear"

scale={{ x: "time" }}

The sharedEvents prop is used internally to coordinate events between components. It should not be set manually.

type: boolean || { x: boolean, y: boolean }

VictoryAxis uses the standard singleQuadrantDomainPadding prop. Read about it here

type: boolean

VictoryAxis uses the standard standalone prop. Read about it here

note: When VictoryAxis is nested within a component like VictoryChart, this prop will be set to false

default: standalone={true}

<svg width={400} height={400}>
  <VictoryAxis crossAxis
    width={400}
    height={400}
    domain={[-10, 10]}
    theme={VictoryTheme.material}
    offsetY={200}
    standalone={false}
  />
  <VictoryAxis dependentAxis crossAxis
    width={400}
    height={400}
    domain={[-10, 10]}
    theme={VictoryTheme.material}
    offsetX={200}
    standalone={false}
  />
</svg>

type: { axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }

The style prop defines the style of the component. The style prop should be given as an object with styles defined for parent, axis, axisLabel, grid, ticks, and tickLabels. Any valid svg styles are supported, but width, height, and padding should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for grid, tick, and tickLabel style properties, and they will be evaluated with the props corresponding to each of these elements, such as tick, index, and text.

note: When a component is rendered as a child of another Victory component, or within a custom <svg> element with standalone={false} parent styles will be applied to the enclosing <g> tag. Many styles that can be applied to a parent <svg> will not be expressed when applied to a <g>.

note: custom angle and verticalAnchor properties may be included in labels styles.

default (provided by default theme): See grayscale theme for more detail

<VictoryAxis
  label="Label"
  style={{
    axis: {stroke: "#756f6a"},
    axisLabel: {fontSize: 20, padding: 30},
    grid: {stroke: ({ tick }) => tick > 0.5 ? "red" : "grey"},
    ticks: {stroke: "grey", size: 5},
    tickLabels: {fontSize: 15, padding: 5}
  }}
/>

type: object

VictoryAxis uses the standard theme prop. Read about it here

See the Themes Guide for information about creating custom themes.

default: theme={VictoryTheme.grayscale}

Note: Use the dependentAxis and independentAxis namespaces to theme axes by type. These namespaces will be merged with any props and styles supplied in the axis namespace.

theme={VictoryTheme.material}

type: element

The tickComponent prop takes a component instance which will be responsible for rendering a tick element. The new element created from the passed tickComponent will be provided with the following props calculated by VictoryAxis: x1, y1, x2, y2, tick, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a tickComponent is not provided, VictoryAxis will use its default LineSegment component.

default: tickComponent={<LineSegment type={"tick"}/>}

tickComponent={<LineSegment events={{ onClick: handleClick }}/>}

type: number

The tickCount prop specifies approximately how many ticks should be drawn on the axis. If an array of ticks is supplied in tickValues or tickFormat, the tickCount prop will be used to downsample the provided array to the specified length. If tickValues are not explicitly provided, this value is used by d3Scale to calculate an approximate number of ticks. d3Scale prioritizes returning "nice" values and evenly spaced ticks over an exact number of ticks. This prop must be given as a positive integer.

type: array || function

The tickFormat prop specifies how tick values should be labeled. The tickFormat prop can be given as an array of values to display for each tick, or as a function to be applied to every tickValue. When given as a function, tickFormat will be called with the following arguments: tick - the individual tick value, index - the index of the tick in the array, and ticks - the entire array of ticks.

  <VictoryAxis
    tickValues={[2.11, 3.9, 6.1, 8.05]}
    tickFormat={(t) => `${Math.round(t)}k`}
  />

type: element

The tickLabelComponent prop takes a component instance which will be used to render the axis label. The new element created from the passed tickLabelComponent will be supplied with the following props: x, y, text, verticalAnchor, textAnchor, angle, transform, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If tickLabelComponent is omitted, a new VictoryLabel will be created with props described above.

default: tickLabelComponent={<VictoryLabel/>}

tickLabelComponent={<VictoryLabel dy={20}/>}

type: array

The tickValues prop explicitly specifies a set of tick values to draw on the axis. This prop should be given as an array of unique values of the same type (i.e., all numbers). The tickValues prop is used to specify the values of each tick, so numeric values are typically appropriate. An array of strings or dates may be supplied for categorical and time series data respectively. Use the tickFormat prop to specify how ticks should be labeled. Note: tickValues should be given as a unique array.

  <VictoryAxis tickValues={[2, 4, 6, 8]}/>

type: number

VictoryAxis uses the standard width prop. Read about it here

default (provided by default theme): width={450}

width={400}