> ## 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.

# XAxis

The X axis of a Cartesian chart.

## Usage

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

<LineChart data={data}>
  <XAxis dataKey="name" />
</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 index of the data point is used.
</ParamField>

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

<ParamField path="type" type="'number' | 'category' | 'auto'" default="category">
  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}
    <XAxis type="number" domain={['dataMin', 'dataMax']} />
    <XAxis type="number" domain={[0, 'dataMax']} />
    <XAxis type="number" domain={['auto', 'auto']} />
    <XAxis type="number" domain={[0, 'dataMax + 1000']} />
    <XAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
    <XAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
    <XAxis type="number" domain={([dataMin, dataMax]) => {
      const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax));
      return [-absMax, absMax];
    }} />
    <XAxis 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="height" type="number" default="30">
  Height of the axis in pixels.
</ParamField>

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

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

  ```tsx theme={null}
  <XAxis padding={{ left: 20, right: 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}
    <XAxis scale="log" />

    import { scaleLog } from 'd3-scale';
    const scale = scaleLog().base(Math.E);
    <XAxis 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 right to left for horizontal charts).
</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">
  Whether to show the axis line. If an object, it will be passed as props to the axis line element.
</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/XAxis.tsx`