Scatter Chart

import { Component } from '@angular/core';
import { WrScatterChart } from 'ngwr/charts/scatter-chart';

@Component({ imports: [WrScatterChart] })
export class MyComponent {}

<wr-scatter-chart
  xLabel="Price"
  yLabel="Rating"
  [series]="[{ label: 'Headphones', data: [{ x: 49, y: 3.6 }, { x: 129, y: 4.2 }] }]"
/>

<wr-scatter-chart xLabel="Weight, kg" yLabel="Battery, h" [series]="devices" />

<wr-scatter-chart
  xLabel="Visitors a day"
  yLabel="Revenue, k$"
  sizeLabel="Floor area, m²"
  [series]="stores"
/>

stores: WrScatterSeries[] = [
  {
    label: 'City centre',
    data: [
      { x: 1450, y: 62, size: 320, label: 'Harbour' },
      { x: 1720, y: 71, size: 410, label: 'Old Town' },
    ],
  },
];

<wr-scatter-chart xLabel="Price" yLabel="Rating" [series]="products" [valueFormat]="format" />

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) + ' ★';

<wr-scatter-chart [series]="devices" toggleableLegend [(hiddenSeries)]="hidden" />

hidden = signal<readonly number[]>([]);

<wr-scatter-chart ariaLabel="Weight against battery life" dataTable [series]="devices" />

interface WrScatterSeries {
  label: string;
  data: readonly WrScatterPoint[];
  color?: string;
}

interface WrScatterPoint {
  x: number;
  y: number;
  size?: number;
  label?: string;
}

type WrScatterAxis = 'x' | 'y' | 'size';