NumericAxis

import { NumericAxis } from 'cx/charts';

The NumericAxis component maps numeric data along the horizontal or vertical axis of a chart. Graph components use it to calculate their position, and the axis adapts its visible range to the data being shown. The axis is also responsive—different tick configurations are selected based on available space.

This example shows four axes: primary X and Y axes with explicit ranges, and secondary inverted axes on the opposite sides.

 <Svg
  style="width: 400px; height: 300px; border: 1px dashed #ddd"
  margin="60 60 60 60"
>
  <Chart
    axes={{
      x: <NumericAxis min={100} max={500} />,
      y: <NumericAxis vertical max={5000} />,
      x2: <NumericAxis secondary inverted />,
      y2: <NumericAxis vertical secondary />,
    }}
  >
    <Rectangle fill="white" margin={1} />
    <Gridlines />
    <Gridlines xAxis="x2" yAxis="y2" />
  </Chart>
</Svg> 

Be careful with gridlines when using secondary axes as they may overlap.

Configuration

Property	Type	Description
`min`	`number`	Minimum value.
`max`	`number`	Maximum value.
`vertical`	`boolean`	Set to `true` for a vertical (Y) axis.
`secondary`	`boolean`	Set to `true` to position the axis on the opposite side (right for vertical, top for horizontal).
`inverted`	`boolean`	Set to `true` to invert the axis direction.
`snapToTicks`	`number`	Range alignment: `0` = lowest ticks, `1` = medium ticks (default), `2` = major ticks.
`normalized`	`boolean`	Set to `true` to normalize the input range (0-1).
`format`	`string`	Value format for labels. Default is `"n"`.
`labelDivisor`	`number`	Divide values by this number before rendering labels. Default is `1`.
`deadZone`	`number`	Size of a zone reserved for labels at both ends of the axis.
`upperDeadZone`	`number`	Size of a zone reserved for labels near the upper end of the axis.
`lowerDeadZone`	`number`	Size of a zone reserved for labels near the lower end of the axis.
`minLabelTickSize`	`number`	Minimum value increment between labels. Set to `1` for integer axes to avoid duplicate labels.