YAxis

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

  FORMAT:

  <YAxis axisLine={false} />
  <YAxis axisLine={{ stroke: 'red', strokeWidth: 2 }} />

  Examples:

  • Bubble Chart

• 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:

  • Population Pyramid
  • Timeline
  • Vertical Composed Chart
  • 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

• 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:

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

  • Candlestick
  • Scatter Chart with many points (performance test)

• 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:

  • Target Price Chart with active Label

• 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
  • Bubble Chart

• 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

• 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:

  • Population Pyramid
  • 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: "left"

  Examples:

  • Biaxial Bar Chart
  • Target Price Chart with active Label
  • Multiple Y Axes Scatter Chart

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

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

  DEFAULT: {"top":0,"bottom":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:

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

  Examples:

  • Vertical Composed Chart

• 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:

  • Positive and Negative Bar Chart
  • Bubble Chart

• tickCountnumberoptional

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

  DEFAULT: 5

• tickFormatterFunctionoptional

  The formatter function of tick.

  Examples:

  • Percent Area Chart
  • Candlestick

• 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:

  • 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: "number"

  Examples:

  • Population Pyramid
  • Timeline
  • Vertical Composed Chart
  • Scatter And Line Of Best Fit
  • Simple Scatter Chart
  • Three Dim Scatter Chart
  • Joint Line Scatter Chart
  • Bubble Chart
  • Scatter Chart With Labels
  • Multiple Y Axes Scatter Chart

• unitstringoptional

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

  Examples:

  • Scatter And Line Of Best Fit
  • 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)

• widthnumber | stringoptional

  Width of the axis in pixels.auto will attempt to resize the axis based on its content.

  DEFAULT: 60

  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

• yAxisIdnumber | stringoptional

  Unique ID that represents this YAxis. Required when there are multiple YAxes.

  DEFAULT: 0

  Examples:

  • Biaxial Bar Chart
  • Multiple Y Axes Scatter Chart

• 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