Swimlanes

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.

 <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> 
 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),
      })),
    );
  }
} 
 interface DataPoint {
  city: string;
  v1: number;
  v2: number;
}

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

const m = createModel<Model>(); 
 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"; 

2023

2024

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.