# CategoryAxis

```ts
import { CategoryAxis } from 'cx/charts';
```

The `CategoryAxis` component maps discrete data values along the horizontal or vertical axis of a chart. It's commonly used with bar charts and scatter plots where data points belong to named categories.

Categories are automatically discovered from the data. In this example, markers define both X and Y categories through their position values.

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

export default (
  <Svg style="width: 400px; height: 300px; border: 1px dashed #ddd">
    <Chart
      margin="60 60 60 90"
      axes={{
        x: <CategoryAxis />,
        y: <CategoryAxis vertical />,
      }}
    >
      <Rectangle fill="white" />
      <Gridlines />

      <Marker x="Red" y="Triangle" shape="triangle" size={20} colorIndex={0} />
      <Marker x="Green" y="Triangle" shape="triangle" size={20} colorIndex={9} />
      <Marker x="Blue" y="Triangle" shape="triangle" size={20} colorIndex={5} />

      <Marker x="Red" y="Square" shape="square" size={20} colorIndex={0} />
      <Marker x="Green" y="Square" shape="square" size={20} colorIndex={9} />
      <Marker x="Blue" y="Square" shape="square" size={20} colorIndex={5} />

      <Marker x="Red" y="Circle" shape="circle" size={20} colorIndex={0} />
      <Marker x="Green" y="Circle" shape="circle" size={20} colorIndex={9} />
      <Marker x="Blue" y="Circle" shape="circle" size={20} colorIndex={5} />
    </Chart>
  </Svg>
);

```

## Configuration

| Property        | Type               | Description                                                                       |
| --------------- | ------------------ | --------------------------------------------------------------------------------- |
| `vertical`      | `boolean`          | Set to `true` for a vertical (Y) axis.                                            |
| `secondary`     | `boolean`          | Set to `true` to position the axis on the opposite side.                          |
| `inverted`      | `boolean`          | Set to `true` to invert the axis direction.                                       |
| `uniform`       | `boolean`          | Uniform axes provide exact size and offset for all entries.                       |
| `values`        | `array` / `object` | Values used to initialize the axis. Object keys become values, values are labels. |
| `names`         | `array` / `object` | Names (labels) corresponding to the given values.                                 |
| `minSize`       | `number`           | Minimum number of category slots.                                                 |
| `categoryCount` | `binding`          | Output binding for category count.                                                |
| `format`        | `string`           | Additional label formatting.                                                      |