# Range

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



`Range` highlights important zones on the chart. Use `x1`/`x2` to create a vertical band or `y1`/`y2` to create a horizontal band. Drag the markers to adjust the range boundaries.

```tsx
import { Svg, Text } from "cx/svg";
import {
  Chart,
  NumericAxis,
  Gridlines,
  Range,
  Marker,
  LineGraph,
  Legend,
  LegendScope,
} from "cx/charts";
import { createModel } from "cx/data";
import { Controller } from "cx/ui";

interface Point {
  x: number;
  y: number;
}

interface RangePoint {
  x: number;
  y: number;
}

interface Model {
  points: Point[];
  p1: RangePoint;
  p2: RangePoint;
  xrange: boolean;
  yrange: boolean;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.set(m.xrange, true);
    this.store.set(m.yrange, true);
    let y = 200;
    this.store.set(
      m.points,
      Array.from({ length: 101 }, (_, i) => ({
        x: i * 4,
        y: (y = y + (Math.random() - 0.4) * 30),
      })),
    );
    this.store.set(m.p1, { x: 150, y: 250 });
    this.store.set(m.p2, { x: 250, y: 350 });
  }
}

export default (
  <LegendScope controller={PageController}>
    <Svg style="width: 100%; height: 400px">
      <Chart
        offset="20 -10 -40 40"
        axes={{
          x: { type: NumericAxis },
          y: { type: NumericAxis, vertical: true },
        }}
      >
        <Gridlines />
        <Range
          x1={m.p1.x}
          x2={m.p2.x}
          colorIndex={11}
          name="X Range"
          active={m.yrange}
        >
          <Text
            anchors="0 0.5 0 0.5"
            offset="5 0 0 0"
            textAnchor="middle"
            dominantBaseline="hanging"
          >
            X Range
          </Text>
        </Range>
        <Range
          y1={m.p1.y}
          y2={m.p2.y}
          colorIndex={8}
          name="Y Range"
          active={m.xrange}
        >
          <Text anchors="0.5 0 0.5 0" dominantBaseline="middle" dx={5}>
            Y Range
          </Text>
        </Range>
        <LineGraph data={m.points} colorIndex={0} />
        <Marker colorIndex={11} x={m.p1.x} size={10} draggableX />
        <Marker colorIndex={11} x={m.p2.x} size={10} draggableX />
        <Marker colorIndex={8} y={m.p1.y} size={10} draggableY />
        <Marker colorIndex={8} y={m.p2.y} size={10} draggableY />
      </Chart>
    </Svg>
    <Legend />
  </LegendScope>
);

```

## Features

- Vertical bands (x1/x2) or horizontal bands (y1/y2)
- Labels inside ranges using child elements
- Legend integration with visibility toggle
- Combine with draggable Markers for interactive ranges

## See Also

- [Timeline Example](/docs/charts/timeline) - Using Range for a timeframe window selector

## Configuration

| Property      | Type      | Default    | Description                                 |
| ------------- | --------- | ---------- | ------------------------------------------- |
| `x1`          | `number`  |            | Left boundary for vertical range.           |
| `x2`          | `number`  |            | Right boundary for vertical range.          |
| `y1`          | `number`  |            | Bottom boundary for horizontal range.       |
| `y2`          | `number`  |            | Top boundary for horizontal range.          |
| `colorIndex`  | `number`  |            | Color palette index.                        |
| `colorMap`    | `string`  |            | Name of the color map to use.               |
| `colorName`   | `string`  |            | Name for color map lookup.                  |
| `name`        | `string`  |            | Name for legend.                            |
| `legend`      | `string`  | `"legend"` | Legend name to show in.                     |
| `active`      | `boolean` | `true`     | Whether the range is active (visible).      |
| `affectsAxes` | `boolean` | `true`     | Whether range boundaries affect axis range. |
| `style`       | `object`  |            | CSS style for the range rectangle.          |
| `class`       | `string`  |            | CSS class for the range element.            |