> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# YAxis

The Y axis of a Cartesian chart.

## Usage

```tsx theme={null}
import { LineChart, YAxis } from 'recharts';

<LineChart data={data}>
  <YAxis />
</LineChart>
```

## Props

<ParamField path="dataKey" type="string | number | function">
  The key of a group of data which should be unique in a chart.
  If not specified, the values from graphical components are used.
</ParamField>

<ParamField path="yAxisId" type="string | number" default="0">
  Unique ID that represents this YAxis.
  Required when there are multiple YAxes.
</ParamField>

<ParamField path="type" type="'number' | 'category' | 'auto'" default="number">
  The type of axis.

  * `category`: Treats data as distinct values. Each value is in the same distance from its neighbors, regardless of their actual numeric difference.
  * `number`: Treats data as continuous range. Values that are numerically closer are placed closer together on the axis.
  * `auto`: the type is inferred based on the chart layout.
</ParamField>

<ParamField path="domain" type="AxisDomain">
  Specify the domain of axis when the axis is a number axis.

  If undefined, then the domain is calculated based on the data and dataKeys.

  The length of domain should be 2, and we will validate the values in domain.

  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.

  <Expandable title="Examples">
    ```tsx theme={null}
    <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 />
    ```
  </Expandable>
</ParamField>

<ParamField path="allowDataOverflow" type="boolean" default="false">
  When domain is specified, whether to allow data points outside of the domain.
</ParamField>

<ParamField path="allowDecimals" type="boolean" default="true">
  Allow decimals in ticks.
</ParamField>

<ParamField path="allowDuplicatedCategory" type="boolean" default="true">
  Allow duplicate category values.
</ParamField>

<ParamField path="width" type="number | 'auto'" default="60">
  Width of the axis in pixels.
  `auto` will attempt to resize the axis based on its content.
</ParamField>

<ParamField path="orientation" type="'left' | 'right'" default="left">
  The orientation of axis.
</ParamField>

<ParamField path="padding" type="object" default="{top: 0, bottom: 0}">
  Axis padding is the distance between the edge of plot area and the first/last tick.

  ```tsx theme={null}
  <YAxis padding={{ top: 20, bottom: 20 }} />
  ```
</ParamField>

<ParamField path="scale" type="ScaleType | CustomScaleDefinition" default="auto">
  Scale function determines how data values are mapped to visual values.
  In other words, decided the mapping between data domain and coordinate range.

  If undefined, or 'auto', the scale function is created internally according to the type of axis and data.

  You can define a custom scale, either as a string shortcut to a d3 scale, or as a complete scale definition object.

  <Expandable title="Examples">
    ```tsx theme={null}
    <YAxis scale="log" />

    import { scaleLog } from 'd3-scale';
    const scale = scaleLog().base(Math.E);
    <YAxis scale={scale} />
    ```
  </Expandable>
</ParamField>

<ParamField path="name" type="string">
  The name of axis data.
</ParamField>

<ParamField path="unit" type="string">
  The unit of axis data.
</ParamField>

<ParamField path="hide" type="boolean" default="false">
  If true, the axis will not be rendered.
</ParamField>

<ParamField path="reversed" type="boolean" default="false">
  If true, the axis will be reversed (rendering from top to bottom).
</ParamField>

<ParamField path="includeHidden" type="boolean" default="false">
  If true, hidden graphical items will be included in the axis domain calculation.
</ParamField>

### Tick props

<ParamField path="tick" type="boolean | object | ReactElement | function" default="true">
  Defines how the individual label text is rendered.
  This controls the settings for individual ticks; on a typical axis, there are multiple ticks, depending on your data.

  If you want to customize the overall axis label, use the `label` prop instead.

  Options:

  * `false`: Do not render any tick labels
  * `true`: Render tick labels with default settings
  * `object`: An object of props to be merged into the internally calculated tick props
  * `ReactElement`: A custom React element to be used as the tick label
  * `function`: A function that returns a React element for custom rendering of tick labels
</ParamField>

<ParamField path="ticks" type="array">
  Ticks can be any type when the axis is the type of category.
  Ticks must be numbers when the axis is the type of number.
</ParamField>

<ParamField path="tickCount" type="number" default="5">
  The count of ticks on the axis.
</ParamField>

<ParamField path="tickFormatter" type="function">
  The formatter function of tick.

  ```tsx theme={null}
  (value: any, index: number) => string
  ```
</ParamField>

<ParamField path="interval" type="number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd'" default="preserveEnd">
  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.
</ParamField>

<ParamField path="minTickGap" type="number" default="5">
  The minimum gap between two adjacent tick labels.
</ParamField>

<ParamField path="tickLine" type="boolean | object" default="true">
  Whether to show tick line. If false or an object, tick line will be drawn with the props.
</ParamField>

<ParamField path="tickSize" type="number" default="6">
  The length of tick line.
</ParamField>

<ParamField path="tickMargin" type="number">
  The margin between tick line and tick.
</ParamField>

<ParamField path="angle" type="number" default="0">
  The angle of tick labels.
</ParamField>

<ParamField path="fontSize" type="number | string">
  Specifies the font size of tick text.
  If this prop is not specified, Recharts will read the default tick size from the DOM.

  Font size is used to calculate the width of the ticks, which in turn is used to determine how many ticks are rendered without overlapping.
</ParamField>

<ParamField path="letterSpacing" type="number | string">
  Specifies the letter spacing of ticks.
  This is used in conjunction with fontSize to calculate the width of the ticks.
  If this prop is not specified, Recharts will read the default letter spacing from the DOM.

  Letter spacing is used to calculate the width of the ticks, which in turn is used to determine how many ticks are rendered without overlapping.
</ParamField>

<ParamField path="niceTicks" type="'none' | 'auto' | 'adaptive' | 'snap125'" default="auto">
  Controls how Recharts calculates "nice" tick values for this axis.

  @since 3.8
</ParamField>

### Style props

<ParamField path="axisLine" type="boolean | object" default="true">
  Determines how the axis line is drawn. Options:

  * `true`: the axis line is drawn with default props
  * `false`: the axis line is not visible
  * `object`: passed as props to SVG `<line>` element representing the axis line

  <Expandable title="Example">
    ```tsx theme={null}
    <YAxis axisLine={false} />
    <YAxis axisLine={{ stroke: 'red', strokeWidth: 2 }} />
    ```
  </Expandable>
</ParamField>

<ParamField path="label" type="boolean | string | number | object | ReactElement | function" default="false">
  The label of axis. Can be text, or a Label component, or custom element.
</ParamField>

<ParamField path="mirror" type="boolean" default="false">
  If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
</ParamField>

<ParamField path="stroke" type="string">
  The stroke color of axis.
</ParamField>

<ParamField path="className" type="string">
  CSS class name for styling.
</ParamField>

## Source

`https://github.com/recharts/recharts/blob/main/src/cartesian/YAxis.tsx`