# Swimlane

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



`Swimlane` creates individual swimlane bands where each one can have unique properties or content. Use with a `Repeater` to create swimlanes for each data record. Unlike `Swimlanes` (plural), this component gives you full control over each lane.

```tsx
import { Svg, Text } from "cx/svg";
import {
  Chart,
  NumericAxis,
  CategoryAxis,
  Swimlane,
} from "cx/charts";
import { createModel } from "cx/data";
import { Controller, Repeater } from "cx/ui";

interface Point {
  category: string;
  value: number;
}

interface Model {
  points: Point[];
  $point: Point;
  $index: number;
}

const m = createModel<Model>();

const cities = [
  "New York",
  "Los Angeles",
  "Chicago",
  "Houston",
  "Phoenix",
  "Philadelphia",
  "San Antonio",
  "San Diego",
  "Dallas",
  "Austin",
];

class PageController extends Controller {
  onInit() {
    this.store.set(
      m.points,
      cities.map((category) => ({
        category,
        value: 10 + Math.random() * 40,
      })),
    );
  }
}

export default (
  <div controller={PageController}>
    <div style="display: flex; flex-wrap: wrap; gap: 16px">
      <Svg style="flex: 1; min-width: 300px; height: 350px">
        <Chart
          offset="20 -20 -20 40"
          axes={{
            x: { type: CategoryAxis, hidden: true },
            y: { type: NumericAxis, vertical: true },
          }}
        >
          <Repeater records={m.points} recordAlias="$point" indexAlias="$index">
            <Swimlane size={0.8} x={m.$point.category} vertical>
              <Text
                value={m.$point.category}
                anchors="0.5 0.5 0.5 0.5"
                dominantBaseline="middle"
                textAnchor="middle"
                style="fill: #888; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center"
              />
            </Swimlane>
          </Repeater>
        </Chart>
      </Svg>
      <Svg style="flex: 1; min-width: 300px; height: 350px">
        <Chart
          offset="20 -20 -40 20"
          axes={{
            x: { type: NumericAxis, snapToTicks: 0 },
            y: { type: CategoryAxis, vertical: true, hidden: true },
          }}
        >
          <Repeater records={m.points} recordAlias="$point">
            <Swimlane size={0.8} y={m.$point.category}>
              <Text
                value={m.$point.category}
                anchors="0.5 0 0.5 0"
                dx={5}
                dominantBaseline="middle"
                style="fill: #888"
              />
            </Swimlane>
          </Repeater>
        </Chart>
      </Svg>
    </div>
  </div>
);

```

## When to Use

- **Swimlane** (this) - When you need individual control over each lane (different colors, content inside lanes, custom styling per lane)
- **Swimlanes** - When you want automatic background bands for readability

## Configuration

| Property     | Type      | Default | Description                                      |
| ------------ | --------- | ------- | ------------------------------------------------ |
| `x`          | `string`  |         | Category value for vertical swimlane position.   |
| `y`          | `string`  |         | Category value for horizontal swimlane position. |
| `size`       | `number`  | `1`     | Swimlane width relative to category step (0-1).  |
| `vertical`   | `boolean` | `false` | Set to `true` for vertical swimlanes.            |
| `colorIndex` | `number`  |         | Background color from the palette.               |
| `style`      | `object`  |         | CSS style for the swimlane rectangle.            |
| `class`      | `string`  |         | CSS class for the swimlane element.              |