Swimlanes

import {Swimlanes} from 'cx/charts';

The Swimlanes widget is used to draw horizontal and vertical swimlanes, usually in the chart backgrounds. Beside aesthetics, swimlanes make it easier to read axis values.

Index

   <div class="widgets" controller={PageController}>
       <Svg style="width:500px; height:400px;">
          <Chart
             offset="20 -20 -30 150"
             axes={{
                x: { type: NumericAxis, snapToTicks: 1 },
                y: { type: CategoryAxis, vertical: true },
             }}
          >
             <Swimlanes size={0.6} step={1} />
             <BarGraph
                data-bind="$page.points"
                colorIndex={0}
                name="V1"
                size={0.3}
                offset={-0.15}
                xField="v1"
                selection={{
                   type: KeySelection,
                   bind: "$page.selected.y",
                   keyField: "y",
                }}
             />

             <BarGraph
                data-bind="$page.points"
                colorIndex={6}
                name="V2"
                size={0.3}
                offset={+0.15}
                xField="v2"
                selection={{
                   type: KeySelection,
                   bind: "$page.selected.y",
                   keyField: "y",
                }}
             />
          </Chart>
       </Svg>
   <Legend vertical />
</div>

Copied!Cx Fiddle

Configuration

Property	Description	Type
axes	Axis definition. Each key represent an axis, and each value hold axis configuration.	object
size	Represents a swimlane size.	number
step	Represents a swimlane step. Define a step on which a swimlane will be rendered. (eg. step 2 will render every second swimlane in the chart.)	number
vertical	Switch to vertical swimlanes.	boolean
xAxis	Name of the horizontal axis. The value should match one of the horizontal axes set in the `axes` configuration of the parent `Chart` component. Default value is `x`.	string
yAxis	Name of the vertical axis. The value should match one of the vertical axes set in the `axes` configuration if the parent `Chart` component. Default value is `y`.	string
anchors	Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge. One aligns with the bottom/right edge. See Svg for more information.	string/number/rect
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
laneOffset	The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability.	number
laneStyle	Style object applied to the swimlanes.	string/object
margin	Apply margin to the given boundaries. See Svg for more information.	string/number/rect
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
offset	Move boundaries specified by the offset. See Svg for more information.	string/number/rect
outerLayout	Defines the outer layout which wraps the widget.	widget
padding	Padding to be applied to the boundaries rectangle before passing to the children.	string/number/rect
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

Swimlanes