# ScatterChart

> Scatter plot: one dot per observation on two numeric axes, several series, an optional least-squares trend line per series and quadrant annotations.

Source: https://ui.jcsoftdev.com/docs/components/scatter-chart

Scatter plot: one dot per observation on two numeric axes, several series,
an optional least-squares trend line per series and quadrant annotations.

## Import

```ts
import { ScatterChart } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/scatter-chart`.

## Usage

```tsx
<ScatterChart
  title="Duración del servicio vs. ticket"
  series={[
      { id: "corte", name: "Corte", points: visits(401, 60, 10, 0.75) },
      { id: "combo", name: "Corte + barba", points: visits(402, 45, 22, 0.9) },
    ]}
  xFormat={minutes}
  yFormat="currency"
  xAxis={{ title: "Duración (min)" }}
  yAxis={{ title: "Ticket (S/)" }}
  trendLine={false}
  radius={5}
  height={340}
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `legend` | `boolean \| "top" \| "bottom"` |  |  |
| `title` * | `string` |  |  |
| `animate` | `boolean` |  |  |
| `className` | `string` |  |  |
| `grid` | `boolean` |  |  |
| `tooltip` | `boolean` |  |  |
| `series` * | `readonly XYSeries[]` |  |  |
| `height` | `number \| "fill"` |  |  |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `xFormat` | `ValueFormat` |  |  |
| `yAxis` | `DistributionAxisOptions` |  |  |
| `brush` | `XYBrush` |  | Rectangular brush over the plot (pointer drag plus keyboard). |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<DistributionLabels>` |  |  |
| `radius` | `number` |  | Point radius when there are no sizes (pixels). |
| `yFormat` | `ValueFormat` |  |  |
| `xAxis` | `DistributionAxisOptions` |  |  |
| `trendLine` | `boolean` |  | Least-squares line per series, drawn over its x range. |
| `quadrants` | `QuadrantOptions` |  |  |
| `xType` | `"time" \| "linear"` |  | "time": `x` is epoch milliseconds and the axis shows calendar ticks. |
| `jitter` | `number \| { x?: number; y?: number; }` |  | Deterministic displacement in pixels that separates overlapping points (a number applies to both axes). Tooltips still show the true values. |
| `seed` | `number` |  | Seed of the jitter, so points are stable between renders. |
| `renderer` | `"canvas" \| "svg"` |  | "canvas" paints the marks on a canvas for tens of thousands of points; axes, tooltip and keyboard stay SVG/HTML. Falls back to SVG when points carry images or `shading` is "shaded". |
| `showLabels` | `boolean` |  | Text labels next to (or inside) the points that have a `label`. |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-scatterchart--default)
- [With Trend Lines](/storybook/?path=/story/charts-scatterchart--with-trend-lines)
- [Quadrants](/storybook/?path=/story/charts-scatterchart--quadrants)
- [Datetime](/storybook/?path=/story/charts-scatterchart--datetime)
- [Jitter](/storybook/?path=/story/charts-scatterchart--jitter)
- [With Images](/storybook/?path=/story/charts-scatterchart--with-images)
- [Canvas 50 K](/storybook/?path=/story/charts-scatterchart--canvas-50-k)
- [Narrow](/storybook/?path=/story/charts-scatterchart--narrow)
- [Loading](/storybook/?path=/story/charts-scatterchart--loading)
- [Empty](/storybook/?path=/story/charts-scatterchart--empty)

## Source

`packages/ui/src/charts/scatter-chart/scatter-chart.tsx`