# RangeMarker

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



`RangeMarker` displays range indicators on column or bar charts. Use different shapes to show maximum, minimum, or target values alongside the main data.

```tsx
import { Svg } from "cx/svg";
import {
  Chart,
  NumericAxis,
  CategoryAxis,
  Gridlines,
  Column,
  Bar,
  RangeMarker,
} from "cx/charts";
import { createModel } from "cx/data";
import { Controller, Repeater } from "cx/ui";

const categories = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];

interface DataPoint {
  category: string;
  value: number;
  max: number;
  min: number;
  optimal: number;
}

interface Model {
  points: DataPoint[];
  $point: DataPoint;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    let v = 50;
    this.store.set(
      m.points,
      Array.from({ length: categories.length }, (_, i) => ({
        category: categories[i],
        value: (v = v + (Math.random() - 0.5) * 30),
        max: v + 30 * Math.random(),
        min: v - 30 * Math.random(),
        optimal: v - 10 * Math.random() + 5,
      })),
    );
  }
}

export default (
  <div controller={PageController}>
    <div style="display: flex; flex-wrap: wrap; gap: 16px">
      <Svg style="flex: 1; min-width: 300px; height: 300px">
        <Chart
          offset="20 -20 -40 40"
          axes={{
            x: { type: CategoryAxis },
            y: { type: NumericAxis, vertical: true },
          }}
        >
          <Gridlines />
          <Repeater records={m.points} recordAlias="$point">
            <Column
              colorIndex={12}
              size={0.7}
              x={m.$point.category}
              y={m.$point.value}
              tooltip={{ tpl: "{$point.category} {$point.value:n;1}" }}
            />
            <RangeMarker
              x={m.$point.category}
              y={m.$point.max}
              lineStyle="stroke: blue"
              size={0.7}
              inflate={3}
              shape="max"
            />
            <RangeMarker
              x={m.$point.category}
              y={m.$point.min}
              lineStyle="stroke: red"
              size={0.7}
              inflate={3}
              shape="min"
            />
            <RangeMarker
              x={m.$point.category}
              y={m.$point.optimal}
              lineStyle="stroke: green"
              size={0.7}
              inflate={3}
              shape="line"
            />
          </Repeater>
        </Chart>
      </Svg>
      <Svg style="flex: 1; min-width: 300px; height: 300px">
        <Chart
          offset="20 -20 -40 40"
          axes={{
            x: { type: NumericAxis, snapToTicks: 0 },
            y: { type: CategoryAxis, vertical: true },
          }}
        >
          <Gridlines />
          <Repeater records={m.points} recordAlias="$point">
            <Bar
              colorIndex={13}
              size={0.7}
              x={m.$point.value}
              y={m.$point.category}
              tooltip={{ tpl: "{$point.category} {$point.value:n;1}" }}
            />
            <RangeMarker
              y={m.$point.category}
              x={m.$point.max}
              lineStyle="stroke: red"
              size={0.7}
              shape="max"
              inflate={3}
              vertical
            />
            <RangeMarker
              y={m.$point.category}
              x={m.$point.min}
              lineStyle="stroke: blue"
              size={0.7}
              shape="min"
              inflate={3}
              vertical
            />
            <RangeMarker
              y={m.$point.category}
              x={m.$point.optimal}
              lineStyle="stroke: green"
              size={0.7}
              shape="line"
              inflate={3}
              vertical
            />
          </Repeater>
        </Chart>
      </Svg>
    </div>
  </div>
);

```

## Shapes

- `"max"` - Caret pointing up (columns) or right (bars) for maximum values
- `"min"` - Caret pointing down (columns) or left (bars) for minimum values
- `"line"` - Simple horizontal or vertical line for targets/averages

## Configuration

| Property    | Type      | Default  | Description                                        |
| ----------- | --------- | -------- | -------------------------------------------------- |
| `x`         | `number`  |          | X-axis position (category or value).               |
| `y`         | `number`  |          | Y-axis position (value or category).               |
| `shape`     | `string`  | `"line"` | Shape: `"max"`, `"min"`, or `"line"`.              |
| `size`      | `number`  | `0.5`    | Width relative to column/bar (0-1).                |
| `inflate`   | `number`  | `0`      | Pixels to extend beyond column/bar edges.          |
| `vertical`  | `boolean` | `false`  | Set to `true` for horizontal bar charts.           |
| `lineStyle` | `string`  |          | CSS style string for the marker line.              |
| `lineClass` | `string`  |          | CSS class for the marker line.                     |