# Swimlanes

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



`Swimlanes` draws horizontal or vertical bands in the chart background. Besides aesthetics, swimlanes make it easier to read axis values by providing visual separation between categories.

```tsx
import { Svg } from "cx/svg";
import {
  Chart,
  NumericAxis,
  CategoryAxis,
  Swimlanes,
  BarGraph,
  Legend,
} from "cx/charts";
import { createModel } from "cx/data";
import { Controller, KeySelection } from "cx/ui";

interface DataPoint {
  city: string;
  v1: number;
  v2: number;
}

interface Model {
  points: DataPoint[];
  selected: string | null;
}

const m = createModel<Model>();

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

class PageController extends Controller {
  onInit() {
    let v1 = 100;
    let v2 = 110;
    this.store.set(
      m.points,
      cities.map((city) => ({
        city,
        v1: (v1 = v1 + (Math.random() - 0.5) * 30),
        v2: (v2 = v2 + (Math.random() - 0.5) * 30),
      })),
    );
  }
}

export default (
  <div controller={PageController} style="display: flex; gap: 16px">
    <Svg style="flex: 1; height: 400px">
      <Chart
        offset="20 -20 -30 100"
        axes={{
          x: { type: NumericAxis, snapToTicks: 1 },
          y: { type: CategoryAxis, vertical: true },
        }}
      >
        <Swimlanes size={0.6} step={1} />
        <BarGraph
          data={m.points}
          colorIndex={0}
          name="2023"
          size={0.3}
          offset={-0.15}
          xField="v1"
          yField="city"
          selection={{
            type: KeySelection,
            bind: m.selected,
            keyField: "city",
          }}
        />
        <BarGraph
          data={m.points}
          colorIndex={6}
          name="2024"
          size={0.3}
          offset={0.15}
          xField="v2"
          yField="city"
          selection={{
            type: KeySelection,
            bind: m.selected,
            keyField: "city",
          }}
        />
      </Chart>
    </Svg>
    <Legend vertical />
  </div>
);

```

## Features

- Automatic swimlane generation based on axis
- Works with both horizontal and vertical orientations
- Configurable size and step
- Combines well with bar graphs for grouped data visualization

## Configuration

| Property | Type     | Default | Description                                            |
| -------- | -------- | ------- | ------------------------------------------------------ |
| `xAxis`  | `string` |         | Axis name for vertical swimlanes.                      |
| `yAxis`  | `string` |         | Axis name for horizontal swimlanes (auto-detected).    |
| `size`   | `number` | `1`     | Swimlane width relative to axis step (0-1).            |
| `step`   | `number` | `1`     | Step between swimlanes. Use `2` for alternating lanes. |
| `style`  | `object` |         | CSS style for swimlane rectangles.                     |
| `class`  | `string` |         | CSS class for swimlane elements.                       |