Recharts

YAxis

Parent Components

Child Components

<Label />

Properties

hideBoolean
If set true, the axis do not display in the chart.
DEFAULT: false
dataKeyString | Number | Functionoptional
The key of data displayed in the axis.
yAxisIdString | Number
The unique id of y-axis.
DEFAULT: 0
widthNumber | 'auto'
The width of the axis, which can be set by user. 'auto' will attempt to resize the axis based on its content.
DEFAULT: 60
heightNumber
The height of axis which is usually calculated internally.
DEFAULT: 0
orientation'left' | 'right'
The orientation of axis.
DEFAULT: 'left'
type'number' | 'category'
The type of axis.
DEFAULT: 'number'
tickCountNumber
The count of axis ticks. Not used if 'type' is 'category'.
DEFAULT: 5
domainArray | Functionoptional
Specify the domain of axis when the axis is a number axis. The length of domain should be 2, and we will validate the values in domain. And each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100', or a function that accepts a single argument and returns a number. If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks. If a function, receives '[dataMin, dataMax]', and must return a computed domain as '[min, max]'.
DEFAULT: [0, 'auto']
FORMAT:
```
<YAxis type="number" domain={['dataMin', 'dataMax']} />
<YAxis type="number" domain={[0, 'dataMax']} />
<YAxis type="number" domain={['auto', 'auto']} />
<YAxis type="number" domain={[0, 'dataMax + 1000']} />
<YAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
<YAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
<YAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
<YAxis type="number" domain={[0, 100]} allowDataOverflow />
```
Examples:
- Numeric XAxis with specified domain
includeHiddenBooleanoptional
Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden
DEFAULT: false
FORMAT:
```
<YAxis type="number" includeHidden />
```
interval"preserveStart" | "preserveEnd" | "preserveStartEnd" | "equidistantPreserveStart" | Number
If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically.
DEFAULT: 'preserveEnd'
Examples:
- the meaning of different intervals
paddingObject
Specify the padding of y-axis. It's similar to padding of XAxis.
DEFAULT: { top: 0, bottom: 0 }
FORMAT:
```
<YAxis padding={{ top: 10 }} />
<YAxis padding={{ bottom: 20 }} />
<YAxis padding={{ top: 20, bottom: 20 }} />
```
Examples:
- XAxis with non-zero padding
minTickGapNumber
The minimum gap between two adjacent labels.
DEFAULT: 5
allowDecimalsBoolean
Allow the ticks of YAxis to be decimals or not.
DEFAULT: true
allowDataOverflowBoolean
When domain of the axis is specified and the type of the axis is 'number', if allowDataOverflow is set to be false, the domain will be adjusted when the minimum value of data is smaller than domain[0] or the maximum value of data is greater than domain[1] so that the axis displays all data values. If set to true, graphic elements (line, area, bars) will be clipped to conform to the specified domain.
DEFAULT: false
FORMAT:
```
<YAxis type="number" domain={[0, 100]} allowDataOverflow />
```
allowDuplicatedCategoryBoolean
Allow the axis has duplicated categorys or not when the type of axis is "category".
DEFAULT: true
axisLineBoolean | Object
If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.
DEFAULT: true
tickLineBoolean | Object
If set false, no axis tick lines will be drawn. If set a object, the option is the configuration of tick lines.
DEFAULT: true
tickSizeNumber
The length of tick line.
DEFAULT: 6
tickFormatterFunctionoptional
The formatter function of tick.
ticksArrayoptional
Set the values of axis ticks manually.
tickBoolean | Object | ReactElementoptional
If set false, no ticks will be drawn. If set a object, the option is the configuration of ticks. If set a React element, the option is the custom react element of drawing ticks.
FORMAT:
```
<YAxis tick={false} />
<YAxis tick={{stroke: 'red', strokeWidth: 2}} />
<YAxis tick={<CustomizedTick />} />
```
mirrorBoolean
If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
DEFAULT: false
reversedBoolean
Reverse the ticks or not.
DEFAULT: false
labelString | Number | ReactElement | Objectoptional
If set a string or a number, default label will be drawn, and the option is content. If set a React element, the option is the custom react element of drawing label. If an object, the option is the props of a new Label instance.
FORMAT:
```
<YAxis label="Height" />
<YAxis label={<CustomizedLabel />} />
<YAxis label={{ value: "YAxis Label" }} />
```
Examples:
- A composed chart with axis labels
scale'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold' | Function
If 'auto' set, the scale function is decided by the type of chart, and the props type.
DEFAULT: auto
FORMAT:
```
<YAxis scale="log" />

import { scaleLog } from 'd3-scale';
const scale = scaleLog().base(Math.E);

...
  <YAxis scale={scale} />
...
```
unitString | Numberoptional
The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
nameString | Numberoptional
The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
onClickFunctionoptional
The customized event handler of click on the ticks of this axis
onMouseDownFunctionoptional
The customized event handler of mousedown on the the ticks of this axis
onMouseUpFunctionoptional
The customized event handler of mouseup on the ticks of this axis
onMouseMoveFunctionoptional
The customized event handler of mousemove on the ticks of this axis
onMouseOverFunctionoptional
The customized event handler of mouseover on the ticks of this axis
onMouseOutFunctionoptional
The customized event handler of mouseout on the ticks of this axis
onMouseEnterFunctionoptional
The customized event handler of mouseenter on the ticks of this axis
onMouseLeaveFunctionoptional
The customized event handler of mouseleave on the ticks of this axis
tickMarginNumberoptional
The margin between tick line and tick.