# ScatterGraph

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



`ScatterGraph` renders scatter plots from an array of data points. Unlike `Marker` which renders individual points, `ScatterGraph` efficiently renders entire datasets and is better suited for visualizing large amounts of data.

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

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

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

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: 200 }, () => ({
        x: 100 + Math.random() * 300,
        y: Math.random() * 300,
        size: Math.random() * 20,
      })),
    );
    this.store.set(
      m.blues,
      Array.from({ length: 200 }, () => ({
        x: Math.random() * 300,
        y: 100 + Math.random() * 300,
        size: Math.random() * 20,
      })),
    );
  }
}

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 />
        <ScatterGraph
          data={m.reds}
          name="Reds"
          colorIndex={1}
          shape="square"
          sizeField="size"
          active={m.showReds}
        />
        <ScatterGraph
          data={m.blues}
          name="Blues"
          colorIndex={5}
          sizeField="size"
          active={m.showBlues}
        />
      </Chart>
    </Svg>
    <Legend vertical />
  </div>
);

```

## Features

- Efficient rendering of large datasets
- Variable point size based on data field
- Multiple shapes: circle, square, triangle
- Legend integration with visibility toggle

## Configuration

| Property     | Type      | Default    | Description                               |
| ------------ | --------- | ---------- | ----------------------------------------- |
| `data`       | `array`   |            | Array of data points.                     |
| `xField`     | `string`  | `"x"`      | Field name for x-axis values.             |
| `yField`     | `string`  | `"y"`      | Field name for y-axis values.             |
| `sizeField`  | `string`  |            | Field name for point size.                |
| `size`       | `number`  | `5`        | Default point size when sizeField not set.|
| `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.                          |
| `legend`     | `string`  | `"legend"` | Legend name to show in.                   |
| `active`     | `boolean` | `true`     | Whether the graph is active (visible).    |