# MarkerLine

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

`MarkerLine` draws horizontal or vertical lines to highlight important values such as minimum, maximum, thresholds, or averages. Child elements (like `Text`) can be placed inside to add labels.

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

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

interface Extremes {
  min: number;
  max: number;
}

interface Model {
  points: Point[];
  extremes: Extremes;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.generate();
    this.addComputable(m.extremes, [m.points], (points) => {
      if (!points || points.length === 0) return { min: 0, max: 0 };
      let min = points[0].y;
      let max = points[0].y;
      for (let i = 1; i < points.length; i++) {
        if (points[i].y < min) min = points[i].y;
        if (points[i].y > max) max = points[i].y;
      }
      return { min, max };
    });
  }

  generate() {
    let y = 100;
    this.store.set(
      m.points,
      Array.from({ length: 101 }, (_, i) => ({
        x: i * 4,
        y: (y = y + (Math.random() - 0.5) * 30),
      })),
    );
  }
}

export default (
  <LegendScope controller={PageController}>
    <Svg style="width: 100%; height: 350px">
      <Chart
        offset="20 -10 -40 40"
        axes={{
          x: { type: NumericAxis },
          y: { type: NumericAxis, vertical: true, deadZone: 20 },
        }}
      >
        <Gridlines />
        <MarkerLine y={m.extremes.min} colorIndex={6}>
          <Text anchors="0 0 0 0" offset="5 0 0 5" dominantBaseline="hanging">
            Min
          </Text>
        </MarkerLine>
        <MarkerLine y={m.extremes.max} colorIndex={3}>
          <Text anchors="0 0 0 0" offset="-5 0 0 5">
            Max
          </Text>
        </MarkerLine>
        <LineGraph data={m.points} colorIndex={0} />
      </Chart>
    </Svg>
    <Legend />
    <Button onClick="generate">Generate</Button>
  </LegendScope>
);

```

> Note how `deadZone` is used on the vertical axis to reserve space for min/max labels.

## Configuration

| Property       | Type      | Default    | Description                                       |
| -------------- | --------- | ---------- | ------------------------------------------------- |
| `x`            | `number`  |            | Draw a vertical line at this x value.             |
| `y`            | `number`  |            | Draw a horizontal line at this y value.           |
| `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 line is active (visible).             |
| `affectsAxes`  | `boolean` | `true`     | Whether line position affects axis range.         |
| `lineStyle`    | `string`  |            | CSS style string for the line.                    |
| `class`        | `string`  |            | CSS class for the line element.                   |