XAxis

Properties

• hideBoolean

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

  DEFAULT: false

• dataKeyString | Number | Functionoptional

  The key of data displayed in the axis.

• xAxisIdString | Number

  The unique id of x-axis.

  DEFAULT: 0

• widthNumber

  The width of axis which is usually calculated internally.

  DEFAULT: 0

• heightNumber

  The height of axis, which can be setted by user.

  DEFAULT: 30

• orientation'bottom' , 'top'

  The orientation of axis

  DEFAULT: 'bottom'

• type'number' | 'category'

  The type of axis.

  DEFAULT: 'category'

• allowDecimalsBoolean

  Allow the ticks of XAxis to be decimals or not.

  DEFAULT: true

• allowDataOverflowBoolean

  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

  FORMAT:

  <XAxis type="number" domain={[0, 100]} allowDataOverflow />

• allowDuplicatedCategoryBoolean

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

  DEFAULT: true

• angleNumber

  The angle of axis ticks.

  DEFAULT: 0

• tickCountNumber

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

  DEFAULT: 5

• domainArray | Functionoptional

  Specify the domain of axis when the axis is a number axis. The length of domain should be 2, and we will validate the values in domain. And 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]'.

  DEFAULT: [0, 'auto']

  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:

  • Numeric XAxis with specified domain

• includeHiddenBooleanoptional

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

  DEFAULT: false

  FORMAT:

  <XAxis type="number" includeHidden />

• interval"preserveStart" | "preserveEnd" | "preserveStartEnd" | "equidistantPreserveStart" | Number

  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:

  • the meaning of different intervals

• paddingObject | "gap" | "no-gap"

  Specify the padding of x-axis.

  DEFAULT: { left: 0, right: 0 }

  FORMAT:

  <XAxis padding={{ left: 10 }} />
  <XAxis padding={{ right: 20 }} />
  <XAxis padding={{ left: 20, right: 20 }} />
  <XAxis padding="gap"
  <XAxis padding="no-gap"

  Examples:

  • XAxis with non-zero padding

• minTickGapNumber

  The minimum gap between two adjacent labels.

  DEFAULT: 5

• axisLineBoolean | Object

  If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.

  DEFAULT: true

• tickLineBoolean | Object

  If set false, no axis tick lines will be drawn. If set a object, the option is the configuration of tick lines.

  DEFAULT: true

• tickSizeNumber

  The length of tick line.

  DEFAULT: 6

• tickFormatterFunctionoptional

  The formatter function of tick.

• ticksArrayoptional

  Set the values of axis ticks manually.

• tickBoolean | Object | ReactElementoptional

  If set false, no ticks will be drawn. If set a object, the option is the configuration of ticks. If set a React element, the option is the custom react element of drawing ticks.

  FORMAT:

  <XAxis tick={false} />
  <XAxis tick={{stroke: 'red', strokeWidth: 2}} />
  <XAxis tick={<CustomizedTick />} />

  Examples:

  • A line chart with customized x-axis tick

• mirrorBoolean

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

  DEFAULT: false

• reversedBoolean

  Reverse the ticks or not.

  DEFAULT: false

• labelString | Number | ReactElement | Objectoptional

  If set a string or a number, default label will be drawn, and the option is content. If set a React element, the option is the custom react element of drawing label. If an object, the option is the props of a new Label instance.

  FORMAT:

  <XAxis label="Height" />
  <XAxis label={<CustomizedLabel />} />
  <XAxis label={{ value: "XAxis Label" }} />

  Examples:

  • A composed chart with axis labels

• scale'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold' | Function

  If set to 'auto', the scale function is decided by the type of chart, and the props type. When set to 'time', make sure to also set type to 'number' and to include a domain.

  DEFAULT: auto

  FORMAT:

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

• unitString | Numberoptional

  The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.

• nameString | Numberoptional

  The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.

• onClickFunctionoptional

  The customized event handler of click on the ticks of this axis

• onMouseDownFunctionoptional

  The customized event handler of mousedown on the the ticks of this axis

• onMouseUpFunctionoptional

  The customized event handler of mouseup on the ticks of this axis

• onMouseMoveFunctionoptional

  The customized event handler of mousemove on the ticks of this axis

• onMouseOverFunctionoptional

  The customized event handler of mouseover on the ticks of this axis

• onMouseOutFunctionoptional

  The customized event handler of mouseout on the ticks of this axis

• onMouseEnterFunctionoptional

  The customized event handler of mouseenter on the ticks of this axis

• onMouseLeaveFunctionoptional

  The customized event handler of mouseleave on the ticks of this axis

• tickMarginNumberoptional

  The margin between tick line and tick.