# NumericAxis

```ts
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.

```tsx
import { Svg, Rectangle } from "cx/svg";
import { Chart, NumericAxis, Gridlines } from "cx/charts";

export default (
  <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.    |