XAxis

The X axis of a Cartesian chart.

Usage

import { LineChart, XAxis } from 'recharts';

<LineChart data={data}>
  <XAxis dataKey="name" />
</LineChart>

Props

dataKey · 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.

xAxisId · string | number · default: "0"

Unique ID that represents this XAxis. Required when there are multiple XAxes.

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.

domain · 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.

Show Examples

<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 />

allowDataOverflow · boolean · default: "false"

When domain is specified, whether to allow data points outside of the domain.

allowDecimals · boolean · default: "true"

Allow decimals in ticks.

allowDuplicatedCategory · boolean · default: "true"

Allow duplicate category values.

height · number · default: "30"

Height of the axis in pixels.

orientation · 'top' | 'bottom' · default: "bottom"

The orientation of axis.

padding · object · default: "{left: 0, right: 0}"

Axis padding is the distance between the edge of plot area and the first/last tick.

<XAxis padding={{ left: 20, right: 20 }} />

scale · 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.

Show Examples

<XAxis scale="log" />

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

name · string

The name of axis data.

unit · string

The unit of axis data.

hide · boolean · default: "false"

If true, the axis will not be rendered.

reversed · boolean · default: "false"

If true, the axis will be reversed (rendering from right to left for horizontal charts).

includeHidden · boolean · default: "false"

If true, hidden graphical items will be included in the axis domain calculation.

Tick props

tick · 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

ticks · 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.

tickCount · number · default: "5"

The count of ticks on the axis.

tickFormatter · function

The formatter function of tick.

(value: any, index: number) => string

interval · 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.

minTickGap · number · default: "5"

The minimum gap between two adjacent tick labels.

tickLine · boolean | object · default: "true"

Whether to show tick line. If false or an object, tick line will be drawn with the props.

tickSize · number · default: "6"

The length of tick line.

tickMargin · number

The margin between tick line and tick.

angle · number · default: "0"

The angle of tick labels.

fontSize · 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.

letterSpacing · 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.

niceTicks · 'none' | 'auto' | 'adaptive' | 'snap125' · default: "auto"

Controls how Recharts calculates “nice” tick values for this axis.

@since 3.8

Style props

axisLine · boolean | object · default: "true"

Whether to show the axis line. If an object, it will be passed as props to the axis line element.

label · boolean | string | number | object | ReactElement | function · default: "false"

The label of axis. Can be text, or a Label component, or custom element.

mirror · boolean · default: "false"

If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.

stroke · string

The stroke color of axis.

className · string

CSS class name for styling.

Source

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