CategoryAxis

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.

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