ScatterGraph

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.

 <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> 
 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,
      })),
    );
  }
} 
 interface Point {
  x: number;
  y: number;
  size: number;
}

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

const m = createModel<Model>(); 
 import { Svg } from "cx/svg";
import { Chart, NumericAxis, Gridlines, ScatterGraph, Legend } from "cx/charts";
import { createModel } from "cx/data";
import { Controller } from "cx/ui"; 

Reds

Blues

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).