# Scatter Chart
> Points on two numeric axes. An optional size per point makes it a bubble chart.
Source: https://ngwr.dev/charts/scatter-chart
Added in v15.1
## Installation
Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.
```typescript
import { Component } from '@angular/core';
import { WrScatterChart } from 'ngwr/charts/scatter-chart';
@Component({ imports: [WrScatterChart] })
export class MyComponent {}
```
```scss
@use 'ngwr/charts/scatter-chart';
```
## Basic
Neither axis is forced to include zero. Each fits its data and snaps to round numbers.
```angular-html
```
## Several series
Each series takes the next palette colour and the next marker shape, so the shape tells them apart too.
```angular-html
```
## Bubbles
`size` is drawn as the marker's area: the largest at `maxRadius`, none under 4px. Bubbles are see-through, since they overlap. `label` names a point.
```angular-html
```
```angular-ts
stores: WrScatterSeries[] = [
{
label: 'City centre',
data: [
{ x: 1450, y: 62, size: 320, label: 'Harbour' },
{ x: 1720, y: 71, size: 410, label: 'Old Town' },
],
},
];
```
## Number format
Numbers follow `LOCALE_ID`. `valueFormat` replaces it, and its second argument says which number it writes: `'x'`, `'y'` or `'size'`.
```angular-html
```
```angular-ts
const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
format = (value: number, axis: WrScatterAxis): string =>
axis === 'x' ? usd.format(value) : value.toFixed(1) + ' ★';
```
## Toggle series
`toggleableLegend` makes each legend row a button. A hidden series leaves the points, both axes, the tooltip and the data table.
```angular-html
```
```angular-ts
hidden = signal([]);
```
## Data table
`dataTable` renders every value as a table only screen readers reach: a group per series, a row per point. Nothing changes on screen.
```angular-html
```
## Accessibility
| Part | Behaviour |
| --- | --- |
| Plot | One `role="img"`, named by `ariaLabel`. No tab stop. |
| Values | Only in the tooltip, unless `dataTable` is on. |
| Series | Told apart by marker shape as well as colour. |
| Tooltip | Pointer only. `Escape` closes it. |
| Forced colours | Points keep their colours. Their ring takes the page colour. |
## Many points
Hover measures every point. Keep a chart to a few thousand points, or bin them first.
## API
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `series` | One entry per series. A series with no `color` takes the next entry from the chart's palette, and every series takes the next marker shape, so several series are told apart unconfigured. | `readonly WrScatterSeries[]` | `[]` |
| `ariaLabel` | Accessible name of the chart. The legend carries the series NAMES only — the values are nowhere in text unless `dataTable` puts them there — so say what the chart shows. Falls back to `scatterChart.label` ("Scatter chart"). | `string \| null` | `null` |
| `xLabel` | The x axis' name. Drawn under the axis only when given; either way it names the x row of the tooltip and the x column of the data table, which fall back to `scatterChart.x` ("X"). | `string \| null` | `null` |
| `yLabel` | The y axis' name. Drawn above the axis only when given; either way it names the y row of the tooltip and the y column of the data table, which fall back to `scatterChart.y` ("Y"). | `string \| null` | `null` |
| `sizeLabel` | What a point's `size` measures. It names the size row of the tooltip and the size column of the data table, which appear only when a point has a size, and falls back to `scatterChart.size` ("Size"). | `string \| null` | `null` |
| `valueFormat` | Writes every number the chart shows — the axis ticks, the tooltip and the data table — and is told which number it is writing: `'x'`, `'y'` or `'size'`, so the two axes can carry different units. A `(value) => string` written for another chart fits too. `null` uses `Intl.NumberFormat` in `LOCALE_ID`, with compact ticks (`1.2K`, `3.4M`) unless the full numbers are shorter. | `((value: number, axis: WrScatterAxis) => string) \| null` | `null` |
| `height` | The plot's height in px, at least 80. | `number` | `240` |
| `showGrid` | Show the gridlines and the tick labels of both axes. | `boolean` | `true` |
| `showLegend` | Show the legend above the chart. | `boolean` | `true` |
| `toggleableLegend` | Make each legend row a toggle button that shows and hides its series, through `hiddenSeries`. A row is a `