XAxis

Props

• allowDataOverflowbooleanoptional

  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

• allowDecimalsbooleanoptional

  Allow the ticks of axis to be decimals or not.

  DEFAULT: true

• allowDuplicatedCategorybooleanoptional

  Allow the axis has duplicated categories or not when the type of axis is "category".

  DEFAULT: true

• anglenumberoptional

  Tick text rotation angle in degrees. Positive values rotate clockwise, negative values rotate counterclockwise.

  DEFAULT: 0

• axisLineReact.SVGProps<SVGLineElement> | false | trueoptional

  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.

  DEFAULT: true

  Examples:

  • Bar Chart With Multi X Axis

• childrenReactNodeoptional

• classNamestringoptional

  The HTML element's class name

• dangerouslySetInnerHTMLObjectoptional

• dataKeyFunction | number | stringoptional

  Decides how to extract the value of this Axis from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the value of this Axis.

  If undefined, it will reuse the dataKey of graphical items.

  Examples:

  • Simple Area Chart
  • Stacked Area Chart
  • Area Chart Connect Nulls
  • Cardinal Area Chart
  • Percent Area Chart
  • Synchronized Area Chart
  • Area Chart Fill By Value
  • Simple Bar Chart
  • Stacked Bar Chart
  • Mix Bar Chart

• domainArray<readonly number> | Array<readonly string> | Function | readonly [AxisDomainItem, AxisDomainItem]optional

  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.

  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]'.

  FORMAT:

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

  Examples:

  • Population Pyramid
  • Target Price Chart with active Label
  • Scatter Chart with many points (performance test)

• heightnumber | stringoptional

  Height of the axis in pixels.

  DEFAULT: 30

  Examples:

  • Bar Chart With Multi X Axis
  • Population Pyramid
  • Timeline
  • Multiple X Axes

• hidebooleanoptional

  If set true, the axis do not display in the chart.

  DEFAULT: false

• includeHiddenbooleanoptional

  Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden

  DEFAULT: false

• interval(union of 6 variants)optional

  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:

  • Bar Chart With Multi X Axis
  • Target Price Chart with active Label
  • Bubble Chart

• label(union of 7 variants)optional

  Defines a single label for the whole axis. This prop renders one label in the center of the axis line. Useful for labeling the axis as a whole, like "Time (in seconds)" or "Distance (in meters)".

  This is not controlling tick labels. If you want to customize tick labels, please see tickFormatter or tick props.

  • false: no label is rendered
  • string | number: the content of the label
  • object: the props of LabelList component
  • ReactElement: a custom label element
  • function: a render function of custom label

  DEFAULT: false

  Examples:

  • Population Pyramid
  • Timeline
  • Composed Chart With Axis Labels
  • Scatter And Line Of Best Fit

• minTickGapnumberoptional

  The minimum gap between two adjacent tick labels

  DEFAULT: 5

• mirrorbooleanoptional

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

  DEFAULT: false

  Examples:

  • Multiple X Axes

• namestringoptional

  The name of data. This option will be used in tooltip. If no value was set to this option, the value of dataKey will be used alternatively.

  Examples:

  • Simple Scatter Chart
  • Three Dim Scatter Chart
  • Joint Line Scatter Chart
  • Bubble Chart
  • Scatter Chart With Labels
  • Multiple Y Axes Scatter Chart
  • Scatter Chart With Cells

• orientationnumber | stringoptional

  The orientation of axis

  DEFAULT: "bottom"

  Examples:

  • Multiple X Axes

• padding"gap" | "no-gap" | Objectoptional

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

  DEFAULT: {"left":0,"right":0}

• rangeAxisRangeoptional@deprecated

  Deprecated: Recharts computes the range automatically based on chart width or height Recharts ignores this prop since 3.0

• reversedbooleanoptional

  If set to true, the ticks of this axis are reversed.

  DEFAULT: false

• scale(union of 20 variants)optional

  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.

  DEFAULT: "auto"

  FORMAT:

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

  Examples:

  • Bar Chart With Multi X Axis
  • Line Bar Area Composed Chart
  • Same Data Composed Chart
  • Composed Chart With Axis Labels
  • Target Price Chart with active Label
  • Composed Responsive Container

• tick(union of 5 variants)optional

  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.

  DEFAULT: true

  Examples:

  • Bar Chart With Multi X Axis
  • Bubble Chart

• tickCountnumberoptional

  The count of axis ticks. Not used if 'type' is 'category'.

  DEFAULT: 5

• tickFormatterFunctionoptional

  The formatter function of tick.

  Examples:

  • Bar Chart With Multi X Axis
  • Population Pyramid
  • Candlestick
  • Target Price Chart with active Label

• tickLineReact.SVGProps<SVGLineElement> | false | trueoptional

  If false set, tick lines will not be drawn. If true set, tick lines will be drawn which have the props calculated internally. If object set, tick lines will be drawn which have the props merged by the internal calculated props and the option.

  DEFAULT: true

  Examples:

  • Bar Chart With Multi X Axis
  • Bubble Chart

• tickMarginnumberoptional

  The margin between tick line and tick.

• ticksArray<readonly AxisTick>optional

  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

• tickSizenumberoptional

  The length of tick line.

  DEFAULT: 6

• typestringoptional

  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.

  DEFAULT: "category"

  Examples:

  • Population Pyramid
  • Timeline
  • Vertical Composed Chart
  • Scatter And Line Of Best Fit
  • Target Price Chart with active Label
  • Simple Scatter Chart
  • Three Dim Scatter Chart
  • Joint Line Scatter Chart
  • Bubble Chart
  • Scatter Chart With Labels

• unitstringoptional

  The unit of data. This option will be used in tooltip.

  Examples:

  • Simple Scatter Chart
  • Three Dim Scatter Chart
  • Joint Line Scatter Chart
  • Scatter Chart With Labels
  • Multiple Y Axes Scatter Chart
  • Scatter Chart With Cells
  • Scatter Chart with many points (performance test)

• xAxisIdnumber | stringoptional

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

  DEFAULT: 0

  Examples:

  • Bar Chart With Multi X Axis
  • Multiple X Axes

• onAbortAdaptChildReactEventHandler<P, T>optional

• onAbortCaptureAdaptChildReactEventHandler<P, T>optional

• onAnimationEndAdaptChildAnimationEventHandler<P, T>optional

• onAnimationEndCaptureAdaptChildAnimationEventHandler<P, T>optional

• onAnimationIterationAdaptChildAnimationEventHandler<P, T>optional

• onAnimationIterationCaptureAdaptChildAnimationEventHandler<P, T>optional

• onAnimationStartAdaptChildAnimationEventHandler<P, T>optional

• onAnimationStartCaptureAdaptChildAnimationEventHandler<P, T>optional

• onAuxClickAdaptChildMouseEventHandler<P, T>optional

• onAuxClickCaptureAdaptChildMouseEventHandler<P, T>optional

• onBeforeInputAdaptChildFormEventHandler<P, T>optional

• onBeforeInputCaptureAdaptChildFormEventHandler<P, T>optional

• onBlurAdaptChildFocusEventHandler<P, T>optional

• onBlurCaptureAdaptChildFocusEventHandler<P, T>optional

• onCanPlayAdaptChildReactEventHandler<P, T>optional

• onCanPlayCaptureAdaptChildReactEventHandler<P, T>optional

• onCanPlayThroughAdaptChildReactEventHandler<P, T>optional

• onCanPlayThroughCaptureAdaptChildReactEventHandler<P, T>optional

• onChangeAdaptChildFormEventHandler<P, T>optional

• onChangeCaptureAdaptChildFormEventHandler<P, T>optional

• onClickAdaptChildMouseEventHandler<P, T>optional

• onClickCaptureAdaptChildMouseEventHandler<P, T>optional

• onCompositionEndAdaptChildCompositionEventHandler<P, T>optional

• onCompositionEndCaptureAdaptChildCompositionEventHandler<P, T>optional

• onCompositionStartAdaptChildCompositionEventHandler<P, T>optional

• onCompositionStartCaptureAdaptChildCompositionEventHandler<P, T>optional

• onCompositionUpdateAdaptChildCompositionEventHandler<P, T>optional

• onCompositionUpdateCaptureAdaptChildCompositionEventHandler<P, T>optional

• onContextMenuAdaptChildMouseEventHandler<P, T>optional

• onContextMenuCaptureAdaptChildMouseEventHandler<P, T>optional

• onCopyAdaptChildClipboardEventHandler<P, T>optional

• onCopyCaptureAdaptChildClipboardEventHandler<P, T>optional

• onCutAdaptChildClipboardEventHandler<P, T>optional

• onCutCaptureAdaptChildClipboardEventHandler<P, T>optional

• onDoubleClickAdaptChildMouseEventHandler<P, T>optional

• onDoubleClickCaptureAdaptChildMouseEventHandler<P, T>optional

• onDragAdaptChildDragEventHandler<P, T>optional

• onDragCaptureAdaptChildDragEventHandler<P, T>optional

• onDragEndAdaptChildDragEventHandler<P, T>optional

• onDragEndCaptureAdaptChildDragEventHandler<P, T>optional

• onDragEnterAdaptChildDragEventHandler<P, T>optional

• onDragEnterCaptureAdaptChildDragEventHandler<P, T>optional

• onDragExitAdaptChildDragEventHandler<P, T>optional

• onDragExitCaptureAdaptChildDragEventHandler<P, T>optional

• onDragLeaveAdaptChildDragEventHandler<P, T>optional

• onDragLeaveCaptureAdaptChildDragEventHandler<P, T>optional

• onDragOverAdaptChildDragEventHandler<P, T>optional

• onDragOverCaptureAdaptChildDragEventHandler<P, T>optional

• onDragStartAdaptChildDragEventHandler<P, T>optional

• onDragStartCaptureAdaptChildDragEventHandler<P, T>optional

• onDropAdaptChildDragEventHandler<P, T>optional

• onDropCaptureAdaptChildDragEventHandler<P, T>optional

• onDurationChangeAdaptChildReactEventHandler<P, T>optional

• onDurationChangeCaptureAdaptChildReactEventHandler<P, T>optional

• onEmptiedAdaptChildReactEventHandler<P, T>optional

• onEmptiedCaptureAdaptChildReactEventHandler<P, T>optional

• onEncryptedAdaptChildReactEventHandler<P, T>optional

• onEncryptedCaptureAdaptChildReactEventHandler<P, T>optional

• onEndedAdaptChildReactEventHandler<P, T>optional

• onEndedCaptureAdaptChildReactEventHandler<P, T>optional

• onErrorAdaptChildReactEventHandler<P, T>optional

• onErrorCaptureAdaptChildReactEventHandler<P, T>optional

• onFocusAdaptChildFocusEventHandler<P, T>optional

• onFocusCaptureAdaptChildFocusEventHandler<P, T>optional

• onGotPointerCaptureAdaptChildPointerEventHandler<P, T>optional

• onGotPointerCaptureCaptureAdaptChildPointerEventHandler<P, T>optional

• onInputAdaptChildFormEventHandler<P, T>optional

• onInputCaptureAdaptChildFormEventHandler<P, T>optional

• onInvalidAdaptChildFormEventHandler<P, T>optional

• onInvalidCaptureAdaptChildFormEventHandler<P, T>optional

• onKeyDownAdaptChildKeyboardEventHandler<P, T>optional

• onKeyDownCaptureAdaptChildKeyboardEventHandler<P, T>optional

• onKeyPressAdaptChildKeyboardEventHandler<P, T>optional

• onKeyPressCaptureAdaptChildKeyboardEventHandler<P, T>optional

• onKeyUpAdaptChildKeyboardEventHandler<P, T>optional

• onKeyUpCaptureAdaptChildKeyboardEventHandler<P, T>optional

• onLoadAdaptChildReactEventHandler<P, T>optional

• onLoadCaptureAdaptChildReactEventHandler<P, T>optional

• onLoadedDataAdaptChildReactEventHandler<P, T>optional

• onLoadedDataCaptureAdaptChildReactEventHandler<P, T>optional

• onLoadedMetadataAdaptChildReactEventHandler<P, T>optional

• onLoadedMetadataCaptureAdaptChildReactEventHandler<P, T>optional

• onLoadStartAdaptChildReactEventHandler<P, T>optional

• onLoadStartCaptureAdaptChildReactEventHandler<P, T>optional

• onLostPointerCaptureAdaptChildPointerEventHandler<P, T>optional

• onLostPointerCaptureCaptureAdaptChildPointerEventHandler<P, T>optional

• onMouseDownAdaptChildMouseEventHandler<P, T>optional

• onMouseDownCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseEnterAdaptChildMouseEventHandler<P, T>optional

• onMouseLeaveAdaptChildMouseEventHandler<P, T>optional

• onMouseMoveAdaptChildMouseEventHandler<P, T>optional

• onMouseMoveCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseOutAdaptChildMouseEventHandler<P, T>optional

• onMouseOutCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseOverAdaptChildMouseEventHandler<P, T>optional

• onMouseOverCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseUpAdaptChildMouseEventHandler<P, T>optional

• onMouseUpCaptureAdaptChildMouseEventHandler<P, T>optional

• onPasteAdaptChildClipboardEventHandler<P, T>optional

• onPasteCaptureAdaptChildClipboardEventHandler<P, T>optional

• onPauseAdaptChildReactEventHandler<P, T>optional

• onPauseCaptureAdaptChildReactEventHandler<P, T>optional

• onPlayAdaptChildReactEventHandler<P, T>optional

• onPlayCaptureAdaptChildReactEventHandler<P, T>optional

• onPlayingAdaptChildReactEventHandler<P, T>optional

• onPlayingCaptureAdaptChildReactEventHandler<P, T>optional

• onPointerCancelAdaptChildPointerEventHandler<P, T>optional

• onPointerCancelCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerDownAdaptChildPointerEventHandler<P, T>optional

• onPointerDownCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerEnterAdaptChildPointerEventHandler<P, T>optional

• onPointerEnterCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerLeaveAdaptChildPointerEventHandler<P, T>optional

• onPointerLeaveCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerMoveAdaptChildPointerEventHandler<P, T>optional

• onPointerMoveCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerOutAdaptChildPointerEventHandler<P, T>optional

• onPointerOutCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerOverAdaptChildPointerEventHandler<P, T>optional

• onPointerOverCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerUpAdaptChildPointerEventHandler<P, T>optional

• onPointerUpCaptureAdaptChildPointerEventHandler<P, T>optional

• onProgressAdaptChildReactEventHandler<P, T>optional

• onProgressCaptureAdaptChildReactEventHandler<P, T>optional

• onRateChangeAdaptChildReactEventHandler<P, T>optional

• onRateChangeCaptureAdaptChildReactEventHandler<P, T>optional

• onResetAdaptChildFormEventHandler<P, T>optional

• onResetCaptureAdaptChildFormEventHandler<P, T>optional

• onScrollAdaptChildUIEventHandler<P, T>optional

• onScrollCaptureAdaptChildUIEventHandler<P, T>optional

• onSeekedAdaptChildReactEventHandler<P, T>optional

• onSeekedCaptureAdaptChildReactEventHandler<P, T>optional

• onSeekingAdaptChildReactEventHandler<P, T>optional

• onSeekingCaptureAdaptChildReactEventHandler<P, T>optional

• onSelectAdaptChildReactEventHandler<P, T>optional

• onSelectCaptureAdaptChildReactEventHandler<P, T>optional

• onStalledAdaptChildReactEventHandler<P, T>optional

• onStalledCaptureAdaptChildReactEventHandler<P, T>optional

• onSubmitAdaptChildFormEventHandler<P, T>optional

• onSubmitCaptureAdaptChildFormEventHandler<P, T>optional

• onSuspendAdaptChildReactEventHandler<P, T>optional

• onSuspendCaptureAdaptChildReactEventHandler<P, T>optional

• onTimeUpdateAdaptChildReactEventHandler<P, T>optional

• onTimeUpdateCaptureAdaptChildReactEventHandler<P, T>optional

• onTouchCancelAdaptChildTouchEventHandler<P, T>optional

• onTouchCancelCaptureAdaptChildTouchEventHandler<P, T>optional

• onTouchEndAdaptChildTouchEventHandler<P, T>optional

• onTouchEndCaptureAdaptChildTouchEventHandler<P, T>optional

• onTouchMoveAdaptChildTouchEventHandler<P, T>optional

• onTouchMoveCaptureAdaptChildTouchEventHandler<P, T>optional

• onTouchStartAdaptChildTouchEventHandler<P, T>optional

• onTouchStartCaptureAdaptChildTouchEventHandler<P, T>optional

• onTransitionEndAdaptChildTransitionEventHandler<P, T>optional

• onTransitionEndCaptureAdaptChildTransitionEventHandler<P, T>optional

• onVolumeChangeAdaptChildReactEventHandler<P, T>optional

• onVolumeChangeCaptureAdaptChildReactEventHandler<P, T>optional

• onWaitingAdaptChildReactEventHandler<P, T>optional

• onWaitingCaptureAdaptChildReactEventHandler<P, T>optional

• onWheelAdaptChildWheelEventHandler<P, T>optional

• onWheelCaptureAdaptChildWheelEventHandler<P, T>optional