# Marker

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



`Marker` displays individual data points on a chart. Markers are commonly used for scatter charts and can be made draggable for interactive data manipulation. Click on legend entries to toggle visibility of each dataset.

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

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

interface Model {
  reds: Point[];
  blues: Point[];
  showReds: boolean;
  showBlues: boolean;
  $point: Point;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.set(m.showReds, true);
    this.store.set(m.showBlues, true);
    this.store.set(
      m.reds,
      Array.from({ length: 50 }, () => ({
        x: 100 + Math.random() * 300,
        y: Math.random() * 300,
        size: 10 + Math.random() * 30,
        color: Math.floor(Math.random() * 3),
      })),
    );
    this.store.set(
      m.blues,
      Array.from({ length: 50 }, () => ({
        x: Math.random() * 300,
        y: 100 + Math.random() * 300,
        size: 10 + Math.random() * 30,
        color: 4 + Math.floor(Math.random() * 3),
      })),
    );
  }
}

export default (
  <div controller={PageController} style="display: flex; gap: 16px">
    <Svg style="flex: 1; height: 400px">
      <Chart
        offset="20 -20 -40 40"
        axes={{
          x: { type: NumericAxis, snapToTicks: 1 },
          y: { type: NumericAxis, vertical: true, snapToTicks: 1 },
        }}
      >
        <Gridlines />
        <Repeater records={m.reds} recordAlias="$point">
          <Marker
            colorIndex={m.$point.color}
            legendColorIndex={1}
            active={m.showReds}
            name="Reds"
            size={m.$point.size}
            x={m.$point.x}
            y={m.$point.y}
            tooltip={{ tpl: "Red ({$point.x:n;0}, {$point.y:n;0})" }}
            style={{ fillOpacity: 0.5 }}
            draggableX
            draggableY
            shape="rect"
            rx={3}
          />
        </Repeater>
        <Repeater records={m.blues} recordAlias="$point">
          <Marker
            colorIndex={m.$point.color}
            legendColorIndex={5}
            active={m.showBlues}
            name="Blues"
            size={m.$point.size}
            x={m.$point.x}
            y={m.$point.y}
            tooltip={{ tpl: "Blue ({$point.x:n;0}, {$point.y:n;0})" }}
            style={{ fillOpacity: 0.5 }}
            draggableX
            draggableY
          />
        </Repeater>
      </Chart>
    </Svg>
    <Legend vertical />
  </div>
);

```

## Features

- Multiple shapes: circle, square, rect, triangle
- Variable size and color based on data
- Draggable in X and/or Y direction with axis constraints
- Tooltips on hover
- Legend integration with visibility toggle

## Configuration

| Property       | Type      | Default     | Description                                            |
| -------------- | --------- | ----------- | ------------------------------------------------------ |
| `x`            | `number`  |             | X-axis position.                                       |
| `y`            | `number`  |             | Y-axis position.                                       |
| `size`         | `number`  | `5`         | Marker size in pixels.                                 |
| `shape`        | `string`  | `"circle"`  | Shape: `"circle"`, `"square"`, `"triangle"`.           |
| `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. Also used as `colorName` if not set.  |
| `legend`       | `string`  | `"legend"`  | Legend name to show in.                                |
| `active`       | `boolean` | `true`      | Whether the marker is active (visible).                |
| `draggableX`   | `boolean` | `false`     | Enable horizontal dragging.                            |
| `draggableY`   | `boolean` | `false`     | Enable vertical dragging.                              |
| `constrain`    | `boolean` | `true`      | Constrain dragging to chart bounds.                    |
| `tooltip`      | `object`  |             | Tooltip configuration.                                 |
| `affectsAxes`  | `boolean` | `true`      | Whether marker position affects axis range calculation.|