# MinMaxFinder

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



`MinMaxFinder` determines the minimum and maximum values displayed by its child graph elements. Use it to highlight data ranges, draw min/max marker lines, or display extreme values.

```tsx
import { Svg, Text } from "cx/svg";
import {
  Chart,
  NumericAxis,
  Gridlines,
  LineGraph,
  MinMaxFinder,
  Range,
  MarkerLine,
} 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 Model {
  data: Point[];
  min: number;
  max: number;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.generate();
  }

  generate() {
    let y = 100;
    this.store.set(
      m.data,
      Array.from({ length: 50 }, (_, x) => ({
        x: x * 2,
        y: (y = y + Math.random() * 30 - 15),
      })),
    );
  }
}

export default (
  <div controller={PageController}>
    <Svg style="width: 100%; height: 300px">
      <Chart
        margin="30 30 40 50"
        axes={{
          x: { type: NumericAxis },
          y: { type: NumericAxis, vertical: true, deadZone: 16 },
        }}
      >
        <Gridlines />
        <MinMaxFinder minY={m.min} maxY={m.max}>
          <Range y1={m.min} y2={m.max} colorIndex={4} />
          <LineGraph data={m.data} colorIndex={0} />
        </MinMaxFinder>
        <MarkerLine y={m.min} colorIndex={9}>
          <Text anchors="0 0 0 0" offset="5 0 0 0" dominantBaseline="hanging">
            Min
          </Text>
        </MarkerLine>
        <MarkerLine y={m.max} colorIndex={5}>
          <Text anchors="0 0 0 0" offset="-5 0 0 0">
            Max
          </Text>
        </MarkerLine>
      </Chart>
    </Svg>
    <Button onClick="generate">Generate</Button>
  </div>
);

```

## How It Works

1. Wrap graph elements (LineGraph, ColumnGraph, etc.) inside `MinMaxFinder`
2. Bind `minY`/`maxY` (or `minX`/`maxX`) to store the discovered extremes
3. Use the bound values with Range, MarkerLine, or Text elements

## Configuration

| Property | Type     | Description                          |
| -------- | -------- | ------------------------------------ |
| `minX`   | `number` | Bind for minimum X value found.      |
| `maxX`   | `number` | Bind for maximum X value found.      |
| `minY`   | `number` | Bind for minimum Y value found.      |
| `maxY`   | `number` | Bind for maximum Y value found.      |