# Wafer Map

Show status and measurements at die coordinates on a wafer.

Canonical: https://chart.syidax.com/docs/components/wafer-map/

<a id="overview"></a>

## sy-wafer-map

Inspect spatial patterns in bins, yield, and parameters.

Match diameter, dieWidth, dieHeight, and the coordinate origin to the actual measurement system. Do not treat missing dies as passes.

Base chart tier: Community. Features such as additional renderers and custom branding have separate entitlement requirements.

| Input | Data description |
| --- | --- |
| `values` | An array of dies as { col, row, bin?, value? }. |
| `mode` | Choose grid, bin, binary, or value. |
| `passBin` | The bin interpreted as a pass. |

- [Run in Components](https://chart.syidax.com/charts/wafer-map) — Change options and view framework-specific code
- [Shared installation and integration](https://chart.syidax.com/docs/getting-started.md)

<a id="example"></a>

## Complete implementation example

```html
<div id="chart-container" style="width: 100%; min-width: 0;"></div>

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced/components/sy-wafer-map.js';
  define0();

  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-wafer-map",
      "props": {
        "engine": "standard",
        "values": [
          {
            "col": -6,
            "row": -6,
            "bin": 2,
            "value": 95
          },
          {
            "col": -5,
            "row": -6,
            "bin": 1,
            "value": 96.93
          },
          {
            "col": -4,
            "row": -6,
            "bin": 1,
            "value": 97.96
          },
          {
            "col": -3,
            "row": -6,
            "bin": 1,
            "value": 97.59
          },
          {
            "col": -2,
            "row": -6,
            "bin": 1,
            "value": 96
          },
          {
            "col": -1,
            "row": -6,
            "bin": 1,
            "value": 93.95
          },
          {
            "col": 0,
            "row": -6,
            "bin": 1,
            "value": 92.39
          },
          {
            "col": 1,
            "row": -6,
            "bin": 1,
            "value": 92.05
          },
          {
            "col": 2,
            "row": -6,
            "bin": 1,
            "value": 93.11
          },
          {
            "col": 3,
            "row": -6,
            "bin": 1,
            "value": 95.05
          },
          {
            "col": 4,
            "row": -6,
            "bin": 1,
            "value": 96.97
          },
          {
            "col": 5,
            "row": -6,
            "bin": 1,
            "value": 97.96
          },
          {
            "col": 6,
            "row": -6,
            "bin": 1,
            "value": 97.56
          },
          {
            "col": -6,
            "row": -5,
            "bin": 1,
            "value": 95.96
          },
          {
            "col": -5,
            "row": -5,
            "bin": 1,
            "value": 93.9
          },
          {
            "col": -4,
            "row": -5,
            "bin": 1,
            "value": 92.36
          },
          {
            "col": -3,
            "row": -5,
            "bin": 1,
            "value": 92.06
          },
          {
            "col": -2,
            "row": -5,
            "bin": 2,
            "value": 93.15
          },
          {
            "col": -1,
            "row": -5,
            "bin": 1,
            "value": 95.1
          },
          {
            "col": 0,
            "row": -5,
            "bin": 1,
            "value": 97.01
          },
          {
            "col": 1,
            "row": -5,
            "bin": 1,
            "value": 97.97
          },
          {
            "col": 2,
            "row": -5,
            "bin": 1,
            "value": 97.54
          },
          {
            "col": 3,
            "row": -5,
            "bin": 1,
            "value": 95.91
          },
          {
            "col": 4,
            "row": -5,
            "bin": 1,
            "value": 93.85
          },
          {
            "col": 5,
            "row": -5,
            "bin": 1,
            "value": 92.34
          },
          {
            "col": 6,
            "row": -5,
            "bin": 1,
            "value": 92.07
          },
          {
            "col": -6,
            "row": -4,
            "bin": 1,
            "value": 93.19
          },
          {
            "col": -5,
            "row": -4,
            "bin": 1,
            "value": 95.15
          },
          {
            "col": -4,
            "row": -4,
            "bin": 1,
            "value": 97.05
          },
          {
            "col": -3,
            "row": -4,
            "bin": 1,
            "value": 97.98
          },
          {
            "col": -2,
            "row": -4,
            "bin": 1,
            "value": 97.51
          },
          {
            "col": -1,
            "row": -4,
            "bin": 1,
            "value": 95.86
          },
          {
            "col": 0,
            "row": -4,
            "bin": 1,
            "value": 93.81
          },
          {
            "col": 1,
            "row": -4,
            "bin": 1,
            "value": 92.31
          },
          {
            "col": 2,
            "row": -4,
            "bin": 2,
            "value": 92.08
          },
          {
            "col": 3,
            "row": -4,
            "bin": 1,
            "value": 93.23
          },
          {
            "col": 4,
            "row": -4,
            "bin": 1,
            "value": 95.2
          },
          {
            "col": 5,
            "row": -4,
            "bin": 1,
            "value": 97.08
          },
          {
            "col": 6,
            "row": -4,
            "bin": 1,
            "value": 97.98
          },
          {
            "col": -6,
            "row": -3,
            "bin": 1,
            "value": 97.48
          },
          {
            "col": -5,
            "row": -3,
            "bin": 1,
            "value": 95.81
          },
          {
            "col": -4,
            "row": -3,
            "bin": 1,
            "value": 93.76
          },
          {
            "col": -3,
            "row": -3,
            "bin": 1,
            "value": 92.29
          },
          {
            "col": -2,
            "row": -3,
            "bin": 1,
            "value": 92.1
          },
          {
            "col": -1,
            "row": -3,
            "bin": 1,
            "value": 93.27
          },
          {
            "col": 0,
            "row": -3,
            "bin": 1,
            "value": 95.25
          },
          {
            "col": 1,
            "row": -3,
            "bin": 1,
            "value": 97.12
          },
          {
            "col": 2,
            "row": -3,
            "bin": 1,
            "value": 97.99
          },
          {
            "col": 3,
            "row": -3,
            "bin": 1,
            "value": 97.45
          },
          {
            "col": 4,
            "row": -3,
            "bin": 1,
            "value": 95.76
          },
          {
            "col": 5,
            "row": -3,
            "bin": 1,
            "value": 93.72
          },
          {
            "col": 6,
            "row": -3,
            "bin": 2,
            "value": 92.27
          },
          {
            "col": -6,
            "row": -2,
            "bin": 1,
            "value": 92.11
          },
          {
            "col": -5,
            "row": -2,
            "bin": 1,
            "value": 93.31
          },
          {
            "col": -4,
            "row": -2,
            "bin": 1,
            "value": 95.3
          },
          {
            "col": -3,
            "row": -2,
            "bin": 1,
            "value": 97.15
          },
          {
            "col": -2,
            "row": -2,
            "bin": 1,
            "value": 97.99
          },
          {
            "col": -1,
            "row": -2,
            "bin": 1,
            "value": 97.42
          },
          {
            "col": 0,
            "row": -2,
            "bin": 1,
            "value": 95.72
          },
          {
            "col": 1,
            "row": -2,
            "bin": 1,
            "value": 93.67
          },
          {
            "col": 2,
            "row": -2,
            "bin": 1,
            "value": 92.25
          },
          {
            "col": 3,
            "row": -2,
            "bin": 1,
            "value": 92.12
          },
          {
            "col": 4,
            "row": -2,
            "bin": 1,
            "value": 93.35
          },
          {
            "col": 5,
            "row": -2,
            "bin": 1,
            "value": 95.35
          },
          {
            "col": 6,
            "row": -2,
            "bin": 1,
            "value": 97.19
          },
          {
            "col": -6,
            "row": -1,
            "bin": 1,
            "value": 98
          },
          {
            "col": -5,
            "row": -1,
            "bin": 1,
            "value": 97.39
          },
          {
            "col": -4,
            "row": -1,
            "bin": 1,
            "value": 95.67
          },
          {
            "col": -3,
            "row": -1,
            "bin": 2,
            "value": 93.63
          },
          {
            "col": -2,
            "row": -1,
            "bin": 1,
            "value": 92.23
          },
          {
            "col": -1,
            "row": -1,
            "bin": 1,
            "value": 92.14
          },
          {
            "col": 0,
            "row": -1,
            "bin": 1,
            "value": 93.39
          },
          {
            "col": 1,
            "row": -1,
            "bin": 1,
            "value": 95.4
          },
          {
            "col": 2,
            "row": -1,
            "bin": 1,
            "value": 97.22
          },
          {
            "col": 3,
            "row": -1,
            "bin": 1,
            "value": 98
          },
          {
            "col": 4,
            "row": -1,
            "bin": 1,
            "value": 97.36
          },
          {
            "col": 5,
            "row": -1,
            "bin": 1,
            "value": 95.62
          },
          {
            "col": 6,
            "row": -1,
            "bin": 1,
            "value": 93.58
          },
          {
            "col": -6,
            "row": 0,
            "bin": 1,
            "value": 92.21
          },
          {
            "col": -5,
            "row": 0,
            "bin": 1,
            "value": 92.15
          },
          {
            "col": -4,
            "row": 0,
            "bin": 1,
            "value": 93.44
          },
          {
            "col": -3,
            "row": 0,
            "bin": 1,
            "value": 95.45
          },
          {
            "col": -2,
            "row": 0,
            "bin": 1,
            "value": 97.26
          },
          {
            "col": -1,
            "row": 0,
            "bin": 1,
            "value": 98
          },
          {
            "col": 0,
            "row": 0,
            "bin": 1,
            "value": 97.33
          },
          {
            "col": 1,
            "row": 0,
            "bin": 2,
            "value": 95.57
          },
          {
            "col": 2,
            "row": 0,
            "bin": 1,
            "value": 93.54
          },
          {
            "col": 3,
            "row": 0,
            "bin": 1,
            "value": 92.19
          },
          {
            "col": 4,
            "row": 0,
            "bin": 1,
            "value": 92.17
          },
          {
            "col": 5,
            "row": 0,
            "bin": 1,
            "value": 93.48
          },
          {
            "col": 6,
            "row": 0,
            "bin": 1,
            "value": 95.5
          },
          {
            "col": -6,
            "row": 1,
            "bin": 1,
            "value": 97.29
          },
          {
            "col": -5,
            "row": 1,
            "bin": 1,
            "value": 98
          },
          {
            "col": -4,
            "row": 1,
            "bin": 1,
            "value": 97.3
          },
          {
            "col": -3,
            "row": 1,
            "bin": 1,
            "value": 95.52
          },
          {
            "col": -2,
            "row": 1,
            "bin": 1,
            "value": 93.49
          },
          {
            "col": -1,
            "row": 1,
            "bin": 1,
            "value": 92.18
          },
          {
            "col": 0,
            "row": 1,
            "bin": 1,
            "value": 92.19
          },
          {
            "col": 1,
            "row": 1,
            "bin": 1,
            "value": 93.52
          },
          {
            "col": 2,
            "row": 1,
            "bin": 1,
            "value": 95.55
          },
          {
            "col": 3,
            "row": 1,
            "bin": 1,
            "value": 97.32
          },
          {
            "col": 4,
            "row": 1,
            "bin": 1,
            "value": 98
          },
          {
            "col": 5,
            "row": 1,
            "bin": 2,
            "value": 97.27
          },
          {
            "col": 6,
            "row": 1,
            "bin": 1,
            "value": 95.47
          },
          {
            "col": -6,
            "row": 2,
            "bin": 1,
            "value": 93.45
          },
          {
            "col": -5,
            "row": 2,
            "bin": 1,
            "value": 92.16
          },
          {
            "col": -4,
            "row": 2,
            "bin": 1,
            "value": 92.21
          },
          {
            "col": -3,
            "row": 2,
            "bin": 1,
            "value": 93.57
          },
          {
            "col": -2,
            "row": 2,
            "bin": 1,
            "value": 95.6
          },
          {
            "col": -1,
            "row": 2,
            "bin": 1,
            "value": 97.35
          },
          {
            "col": 0,
            "row": 2,
            "bin": 1,
            "value": 98
          },
          {
            "col": 1,
            "row": 2,
            "bin": 1,
            "value": 97.23
          },
          {
            "col": 2,
            "row": 2,
            "bin": 1,
            "value": 95.42
          },
          {
            "col": 3,
            "row": 2,
            "bin": 1,
            "value": 93.41
          },
          {
            "col": 4,
            "row": 2,
            "bin": 1,
            "value": 92.14
          },
          {
            "col": 5,
            "row": 2,
            "bin": 1,
            "value": 92.22
          },
          {
            "col": 6,
            "row": 2,
            "bin": 1,
            "value": 93.61
          },
          {
            "col": -6,
            "row": 3,
            "bin": 1,
            "value": 95.65
          },
          {
            "col": -5,
            "row": 3,
            "bin": 1,
            "value": 97.38
          },
          {
            "col": -4,
            "row": 3,
            "bin": 2,
            "value": 98
          },
          {
            "col": -3,
            "row": 3,
            "bin": 1,
            "value": 97.2
          },
          {
            "col": -2,
            "row": 3,
            "bin": 1,
            "value": 95.37
          },
          {
            "col": -1,
            "row": 3,
            "bin": 1,
            "value": 93.36
          },
          {
            "col": 0,
            "row": 3,
            "bin": 1,
            "value": 92.13
          },
          {
            "col": 1,
            "row": 3,
            "bin": 1,
            "value": 92.24
          },
          {
            "col": 2,
            "row": 3,
            "bin": 1,
            "value": 93.66
          },
          {
            "col": 3,
            "row": 3,
            "bin": 1,
            "value": 95.7
          },
          {
            "col": 4,
            "row": 3,
            "bin": 1,
            "value": 97.41
          },
          {
            "col": 5,
            "row": 3,
            "bin": 1,
            "value": 97.99
          },
          {
            "col": 6,
            "row": 3,
            "bin": 1,
            "value": 97.16
          },
          {
            "col": -6,
            "row": 4,
            "bin": 1,
            "value": 95.32
          },
          {
            "col": -5,
            "row": 4,
            "bin": 1,
            "value": 93.32
          },
          {
            "col": -4,
            "row": 4,
            "bin": 1,
            "value": 92.11
          },
          {
            "col": -3,
            "row": 4,
            "bin": 1,
            "value": 92.26
          },
          {
            "col": -2,
            "row": 4,
            "bin": 1,
            "value": 93.7
          },
          {
            "col": -1,
            "row": 4,
            "bin": 1,
            "value": 95.75
          },
          {
            "col": 0,
            "row": 4,
            "bin": 2,
            "value": 97.44
          },
          {
            "col": 1,
            "row": 4,
            "bin": 1,
            "value": 97.99
          },
          {
            "col": 2,
            "row": 4,
            "bin": 1,
            "value": 97.13
          },
          {
            "col": 3,
            "row": 4,
            "bin": 1,
            "value": 95.27
          },
          {
            "col": 4,
            "row": 4,
            "bin": 1,
            "value": 93.28
          },
          {
            "col": 5,
            "row": 4,
            "bin": 1,
            "value": 92.1
          },
          {
            "col": 6,
            "row": 4,
            "bin": 1,
            "value": 92.29
          },
          {
            "col": -6,
            "row": 5,
            "bin": 1,
            "value": 93.75
          },
          {
            "col": -5,
            "row": 5,
            "bin": 1,
            "value": 95.8
          },
          {
            "col": -4,
            "row": 5,
            "bin": 1,
            "value": 97.47
          },
          {
            "col": -3,
            "row": 5,
            "bin": 1,
            "value": 97.99
          },
          {
            "col": -2,
            "row": 5,
            "bin": 1,
            "value": 97.09
          },
          {
            "col": -1,
            "row": 5,
            "bin": 1,
            "value": 95.22
          },
          {
            "col": 0,
            "row": 5,
            "bin": 1,
            "value": 93.24
          },
          {
            "col": 1,
            "row": 5,
            "bin": 1,
            "value": 92.09
          },
          {
            "col": 2,
            "row": 5,
            "bin": 1,
            "value": 92.31
          },
          {
            "col": 3,
            "row": 5,
            "bin": 1,
            "value": 93.79
          },
          {
            "col": 4,
            "row": 5,
            "bin": 2,
            "value": 95.85
          },
          {
            "col": 5,
            "row": 5,
            "bin": 1,
            "value": 97.5
          },
          {
            "col": 6,
            "row": 5,
            "bin": 1,
            "value": 97.98
          },
          {
            "col": -6,
            "row": 6,
            "bin": 1,
            "value": 97.06
          },
          {
            "col": -5,
            "row": 6,
            "bin": 1,
            "value": 95.17
          },
          {
            "col": -4,
            "row": 6,
            "bin": 1,
            "value": 93.2
          },
          {
            "col": -3,
            "row": 6,
            "bin": 1,
            "value": 92.08
          },
          {
            "col": -2,
            "row": 6,
            "bin": 1,
            "value": 92.33
          },
          {
            "col": -1,
            "row": 6,
            "bin": 1,
            "value": 93.84
          },
          {
            "col": 0,
            "row": 6,
            "bin": 1,
            "value": 95.89
          },
          {
            "col": 1,
            "row": 6,
            "bin": 1,
            "value": 97.53
          },
          {
            "col": 2,
            "row": 6,
            "bin": 1,
            "value": 97.97
          },
          {
            "col": 3,
            "row": 6,
            "bin": 1,
            "value": 97.02
          },
          {
            "col": 4,
            "row": 6,
            "bin": 1,
            "value": 95.12
          },
          {
            "col": 5,
            "row": 6,
            "bin": 1,
            "value": 93.16
          },
          {
            "col": 6,
            "row": 6,
            "bin": 1,
            "value": 92.07
          }
        ],
        "diameter": 150,
        "dieWidth": 10,
        "dieHeight": 10,
        "mode": "bin",
        "passBin": 1,
        "width": 640,
        "height": 420,
        "brandPosition": "bottom-right",
        "brandLogo": ""
      }
    }
  ];
  const container = document.querySelector('#chart-container');
  const elements = specs.map(({ tag, id, props }) => {
    const element = document.createElement(tag);
    element.id = id;
    Object.assign(element, props);
    element.setAttribute('aria-label', 'wafer-map example chart');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('dieClick', event.detail);
  };
  chart.addEventListener('dieClick', onEvent);
  const observer = new ResizeObserver(([entry]) => {
    const width = Math.max(160, Math.floor(entry.contentRect.width));
    elements.forEach(element => { element.width = width; });
  });
  observer.observe(container);

  // In an SPA, call this function when the view is disposed.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('dieClick', onEvent);
    container.replaceChildren();
  }
</script>
```

<a id="props"></a>

## Properties

<a id="property-width"></a>

### width

Chart width in pixels. If the container width changes, update width from a ResizeObserver.

| Item | Value |
| --- | --- |
| JavaScript property | `width` |
| HTML attribute | `width` |
| Type | `number` |
| Default | `520` |

<a id="property-height"></a>

### height

Chart height in pixels. Allow space for axes, titles, and the legend.

| Item | Value |
| --- | --- |
| JavaScript property | `height` |
| HTML attribute | `height` |
| Type | `number` |
| Default | `500` |

<a id="property-brandLogo"></a>

### brandLogo

The default is the Syidax symbol and wordmark. With the Pro chart.branding entitlement, set none to remove it or provide a PNG, JPEG, or WebP data URL to replace it.

| Item | Value |
| --- | --- |
| JavaScript property | `brandLogo` |
| HTML attribute | `brand-logo` |
| Type | `string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-brandPosition"></a>

### brandPosition

The corner where the logo is anchored. Community and Pro both support all four corners, using the same position on screen and in image exports.

| Item | Value |
| --- | --- |
| JavaScript property | `brandPosition` |
| HTML attribute | `brand-position` |
| Type | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` |
| Default | `'bottom-right'` |
| Allowed values | `top-left`, `top-right`, `bottom-left`, `bottom-right` |

<a id="property-diameter"></a>

### diameter

Wafer diameter in mm (default 300).

| Item | Value |
| --- | --- |
| JavaScript property | `diameter` |
| HTML attribute | `diameter` |
| Type | `number` |
| Default | `300` |

<a id="property-edgeExclusion"></a>

### edgeExclusion

Unusable edge band in mm (default 3).

| Item | Value |
| --- | --- |
| JavaScript property | `edgeExclusion` |
| HTML attribute | `edge-exclusion` |
| Type | `number` |
| Default | `3` |

<a id="property-indicator"></a>

### indicator

Orientation-mark kind: `notch` (300 mm standard) / `flat` (legacy) / `none`.

| Item | Value |
| --- | --- |
| JavaScript property | `indicator` |
| HTML attribute | `indicator` |
| Type | `WaferIndicator` |
| Default | `'notch'` |
| Allowed values | `none`, `flat`, `notch` |

- [WaferIndicator](https://chart.syidax.com/docs/types/WaferIndicator.md) — Type definition

<a id="property-orientation"></a>

### orientation

Where the mark points (fab standard: `down`).

| Item | Value |
| --- | --- |
| JavaScript property | `orientation` |
| HTML attribute | `orientation` |
| Type | `WaferOrientation` |
| Default | `'down'` |
| Allowed values | `left`, `right`, `down`, `up` |

- [WaferOrientation](https://chart.syidax.com/docs/types/WaferOrientation.md) — Type definition

<a id="property-flatLength"></a>

### flatLength

Flat chord length in mm (default diameter × 0.2).

| Item | Value |
| --- | --- |
| JavaScript property | `flatLength` |
| HTML attribute | `flat-length` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-notchDepth"></a>

### notchDepth

Notch depth in mm (default 2.5).

| Item | Value |
| --- | --- |
| JavaScript property | `notchDepth` |
| HTML attribute | `notch-depth` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-dieWidth"></a>

### dieWidth

Die size in mm (defaults 10 × 10).

| Item | Value |
| --- | --- |
| JavaScript property | `dieWidth` |
| HTML attribute | `die-width` |
| Type | `number` |
| Default | `10` |

<a id="property-dieHeight"></a>

### dieHeight

Set as an HTML attribute or JavaScript property. type: number.

| Item | Value |
| --- | --- |
| JavaScript property | `dieHeight` |
| HTML attribute | `die-height` |
| Type | `number` |
| Default | `10` |

<a id="property-scribeX"></a>

### scribeX

Scribe-street widths in mm (defaults 0.2).

| Item | Value |
| --- | --- |
| JavaScript property | `scribeX` |
| HTML attribute | `scribe-x` |
| Type | `number` |
| Default | `0.2` |

<a id="property-scribeY"></a>

### scribeY

Set as an HTML attribute or JavaScript property. type: number.

| Item | Value |
| --- | --- |
| JavaScript property | `scribeY` |
| HTML attribute | `scribe-y` |
| Type | `number` |
| Default | `0.2` |

<a id="property-offsetX"></a>

### offsetX

Grid shift in mm relative to the centred lattice.

| Item | Value |
| --- | --- |
| JavaScript property | `offsetX` |
| HTML attribute | `offset-x` |
| Type | `number` |
| Default | `0` |

<a id="property-offsetY"></a>

### offsetY

Set as an HTML attribute or JavaScript property. type: number.

| Item | Value |
| --- | --- |
| JavaScript property | `offsetY` |
| HTML attribute | `offset-y` |
| Type | `number` |
| Default | `0` |

<a id="property-values"></a>

### values

An array of dies as { col, row, bin?, value? }.

| Item | Value |
| --- | --- |
| JavaScript property | `values` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `WaferMapData` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [WaferMapData](https://chart.syidax.com/docs/types/WaferMapData.md) — Type definition

<a id="property-mode"></a>

### mode

Choose grid, bin, binary, or value.

| Item | Value |
| --- | --- |
| JavaScript property | `mode` |
| HTML attribute | `mode` |
| Type | `WaferMapMode` |
| Default | `'grid'` |
| Allowed values | `value`, `grid`, `bin`, `binary` |

- [WaferMapMode](https://chart.syidax.com/docs/types/WaferMapMode.md) — Type definition

<a id="property-binColors"></a>

### binColors

Explicit per-bin colours (`{ [bin]: colour }`) — bin mode only.

| Item | Value |
| --- | --- |
| JavaScript property | `binColors` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `Readonly<Record<string, string>>` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-passBin"></a>

### passBin

The bin interpreted as a pass.

| Item | Value |
| --- | --- |
| JavaScript property | `passBin` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `number \| string` |
| Default | `1` |

<a id="property-passColor"></a>

### passColor

Pass-bin fill.

| Item | Value |
| --- | --- |
| JavaScript property | `passColor` |
| HTML attribute | `pass-color` |
| Type | `string` |
| Default | `'#16a34a'` |

<a id="property-failColor"></a>

### failColor

Fail fill (`mode="binary"` — every non-pass bin).

| Item | Value |
| --- | --- |
| JavaScript property | `failColor` |
| HTML attribute | `fail-color` |
| Type | `string` |
| Default | `'#dc2626'` |

<a id="property-colorAxis"></a>

### colorAxis

Value-axis config for `mode="value"`: `auto` (data extent, blues) or `{min, max, scheme, minColor, maxColor, stops, center}` — a diverging scheme name (rdbu, spectral, …) anchors its midpoint on `center`.

| Item | Value |
| --- | --- |
| JavaScript property | `colorAxis` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `WaferValueAxisInput` |
| Default | `'auto'` |
| Literals in the type | `auto` |

- [WaferValueAxisInput](https://chart.syidax.com/docs/types/WaferValueAxisInput.md) — Type definition

<a id="property-showStats"></a>

### showStats

Show the min/mean/σ/median statistics line under the value legend.

| Item | Value |
| --- | --- |
| JavaScript property | `showStats` |
| HTML attribute | `show-stats` |
| Type | `boolean` |
| Default | `true` |

<a id="property-overlay"></a>

### overlay

Overlay layer on top of any mode: `none` / `defect`.

| Item | Value |
| --- | --- |
| JavaScript property | `overlay` |
| HTML attribute | `overlay` |
| Type | `'none' \| 'defect'` |
| Default | `'none'` |
| Allowed values | `none`, `defect` |

<a id="property-grid"></a>

### grid

Grid chrome: `die` (scribe streets only) or `shot` (+ reticle boundaries).

| Item | Value |
| --- | --- |
| JavaScript property | `grid` |
| HTML attribute | `grid` |
| Type | `'die' \| 'shot'` |
| Default | `'die'` |
| Allowed values | `die`, `shot` |

<a id="property-shotCols"></a>

### shotCols

Dies per exposure shot (defaults 3 × 2).

| Item | Value |
| --- | --- |
| JavaScript property | `shotCols` |
| HTML attribute | `shot-cols` |
| Type | `number` |
| Default | `3` |

<a id="property-shotRows"></a>

### shotRows

Set as an HTML attribute or JavaScript property. type: number.

| Item | Value |
| --- | --- |
| JavaScript property | `shotRows` |
| HTML attribute | `shot-rows` |
| Type | `number` |
| Default | `2` |

<a id="property-shotOffsetX"></a>

### shotOffsetX

Shot-grid alignment shift in whole dies.

| Item | Value |
| --- | --- |
| JavaScript property | `shotOffsetX` |
| HTML attribute | `shot-offset-x` |
| Type | `number` |
| Default | `0` |

<a id="property-shotOffsetY"></a>

### shotOffsetY

Set as an HTML attribute or JavaScript property. type: number.

| Item | Value |
| --- | --- |
| JavaScript property | `shotOffsetY` |
| HTML attribute | `shot-offset-y` |
| Type | `number` |
| Default | `0` |

<a id="property-shotColor"></a>

### shotColor

Shot boundary stroke.

| Item | Value |
| --- | --- |
| JavaScript property | `shotColor` |
| HTML attribute | `shot-color` |
| Type | `string` |
| Default | `'#334155'` |

<a id="property-defects"></a>

### defects

Inspection defects (`{x, y, class?, size?}`, wafer mm, notch frame).

| Item | Value |
| --- | --- |
| JavaScript property | `defects` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `WaferDefectData` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [WaferDefectData](https://chart.syidax.com/docs/types/WaferDefectData.md) — Type definition

<a id="property-defectColor"></a>

### defectColor

Dot colour for unclassified defects (classes cycle the palette).

| Item | Value |
| --- | --- |
| JavaScript property | `defectColor` |
| HTML attribute | `defect-color` |
| Type | `string` |
| Default | `'#0f172a'` |

<a id="property-palette"></a>

### palette

Categorical palette cycled over fail bins (sorted order).

| Item | Value |
| --- | --- |
| JavaScript property | `palette` |
| HTML attribute | `palette` |
| Type | `keyof typeof categorical` |
| Default | `'tableau10'` |
| Allowed values | `tableau10`, `tableau20`, `observable10`, `paired12`, `set3_12` |

<a id="property-binLegend"></a>

### binLegend

Show the bin legend under the wafer (bin mode).

| Item | Value |
| --- | --- |
| JavaScript property | `binLegend` |
| HTML attribute | `bin-legend` |
| Type | `boolean` |
| Default | `true` |

<a id="property-legendPosition"></a>

### legendPosition

Storybook parity (2026-09-10) — where the bin legend (`mode="bin"`; the pass / fail readout of `mode="binary"` follows it) sits: docked on an edge of the stage (`top` / `bottom` / `left` / `right`; the band is taken off the wafer) or `float` — an overlay box inside the drawing rectangle anchored by `legend-float-align` / `legend-float-vertical-align`. The line chart's legend contract. The parameter map's gradient + statistics panel (`mode="value"`) keeps its footer.

| Item | Value |
| --- | --- |
| JavaScript property | `legendPosition` |
| HTML attribute | `legend-position` |
| Type | `WaferMapLegendPosition` |
| Default | `'bottom'` |
| Allowed values | `top`, `bottom`, `left`, `right`, `float` |

- [WaferMapLegendPosition](https://chart.syidax.com/docs/types/WaferMapLegendPosition.md) — Type definition

<a id="property-legendFloatAlign"></a>

### legendFloatAlign

`legend-position="float"`: the overlay's horizontal anchor inside the drawing rectangle.

| Item | Value |
| --- | --- |
| JavaScript property | `legendFloatAlign` |
| HTML attribute | `legend-float-align` |
| Type | `'start' \| 'center' \| 'end'` |
| Default | `'end'` |
| Allowed values | `start`, `center`, `end` |

<a id="property-legendFloatVerticalAlign"></a>

### legendFloatVerticalAlign

`legend-position="float"`: the overlay's vertical anchor inside the drawing rectangle.

| Item | Value |
| --- | --- |
| JavaScript property | `legendFloatVerticalAlign` |
| HTML attribute | `legend-float-vertical-align` |
| Type | `'top' \| 'middle' \| 'bottom'` |
| Default | `'top'` |
| Allowed values | `top`, `bottom`, `middle` |

<a id="property-legendDraggable"></a>

### legendDraggable

`legend-position="float"`: the floating legend can be dragged inside the chart bounds.

| Item | Value |
| --- | --- |
| JavaScript property | `legendDraggable` |
| HTML attribute | `legend-draggable` |
| Type | `boolean` |
| Default | `false` |

<a id="property-showPartial"></a>

### showPartial

Draw edge (partial) dies.

| Item | Value |
| --- | --- |
| JavaScript property | `showPartial` |
| HTML attribute | `show-partial` |
| Type | `boolean` |
| Default | `true` |

<a id="property-showExclusion"></a>

### showExclusion

Draw the dashed edge-exclusion ring.

| Item | Value |
| --- | --- |
| JavaScript property | `showExclusion` |
| HTML attribute | `show-exclusion` |
| Type | `boolean` |
| Default | `true` |

<a id="property-dieIndexOrigin"></a>

### dieIndexOrigin

Die-index convention (fab map formats): `top-left` counts from the lattice bounding-box corner, `center` keeps signed notch-frame coordinates. Indices are notch-frame-stable — the view `orientation` never renumbers a die.

| Item | Value |
| --- | --- |
| JavaScript property | `dieIndexOrigin` |
| HTML attribute | `die-index-origin` |
| Type | `DieIndexOrigin` |
| Default | `'top-left'` |
| Allowed values | `top-left`, `center` |

- [DieIndexOrigin](https://chart.syidax.com/docs/types/DieIndexOrigin.md) — Type definition

<a id="property-dieIndexBase"></a>

### dieIndexBase

First index value (0 or 1).

| Item | Value |
| --- | --- |
| JavaScript property | `dieIndexBase` |
| HTML attribute | `die-index-base` |
| Type | `number` |
| Default | `0` |

<a id="property-showDieIndex"></a>

### showDieIndex

Print `ix,iy` inside each die (auto-hides when dies get too small).

| Item | Value |
| --- | --- |
| JavaScript property | `showDieIndex` |
| HTML attribute | `show-die-index` |
| Type | `boolean` |
| Default | `false` |

<a id="property-waferColor"></a>

### waferColor

Substrate disc fill.

| Item | Value |
| --- | --- |
| JavaScript property | `waferColor` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `string \| ReadonlyArray<string>` |
| Default | `'#eef2f7'` |

<a id="property-dieColor"></a>

### dieColor

Full (probeable) die fill.

| Item | Value |
| --- | --- |
| JavaScript property | `dieColor` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `string \| ReadonlyArray<string>` |
| Default | `'#cbd5e1'` |

<a id="property-partialColor"></a>

### partialColor

Edge (partial) die fill.

| Item | Value |
| --- | --- |
| JavaScript property | `partialColor` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `string \| ReadonlyArray<string>` |
| Default | `'#e2e8f0'` |

<a id="property-dataColor"></a>

### dataColor

Fill for dies that carry data (until the mode days colour by it).

| Item | Value |
| --- | --- |
| JavaScript property | `dataColor` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `string \| ReadonlyArray<string>` |
| Default | `'#2563eb'` |

<a id="property-edgeColor"></a>

### edgeColor

Scribe-street stroke between dies.

| Item | Value |
| --- | --- |
| JavaScript property | `edgeColor` |
| HTML attribute | `edge-color` |
| Type | `string` |
| Default | `'rgba(255,255,255,0.9)'` |

<a id="property-outlineColor"></a>

### outlineColor

Wafer outline stroke.

| Item | Value |
| --- | --- |
| JavaScript property | `outlineColor` |
| HTML attribute | `outline-color` |
| Type | `string` |
| Default | `'#64748b'` |

<a id="property-chartTitle"></a>

### chartTitle

The title inside the chart. Explain the data's unit and meaning alongside it.

| Item | Value |
| --- | --- |
| JavaScript property | `chartTitle` |
| HTML attribute | `chart-title` |
| Type | `string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-chartSubtitle"></a>

### chartSubtitle

The subtitle inside the chart.

| Item | Value |
| --- | --- |
| JavaScript property | `chartSubtitle` |
| HTML attribute | `chart-subtitle` |
| Type | `string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-tooltipShow"></a>

### tooltipShow

Die tooltip on hover ().

| Item | Value |
| --- | --- |
| JavaScript property | `tooltipShow` |
| HTML attribute | `tooltip-show` |
| Type | `boolean` |
| Default | `true` |

<a id="property-tooltipFormat"></a>

### tooltipFormat

Custom tooltip text (return a string; default: index · bin/value · shot).

| Item | Value |
| --- | --- |
| JavaScript property | `tooltipFormat` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `(detail: WaferDieEventDetail) => string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [WaferDieEventDetail](https://chart.syidax.com/docs/types/WaferDieEventDetail.md) — Type definition

<a id="property-zoom"></a>

### zoom

Storybook parity (2026-09-10) — viewport zoom: `'x'` | `'y'` | `'xy'` | `true` (x) enable the drag rectangle, the pan, Ctrl + wheel, the pinch and the keyboard (`+` / `-` / `Escape`) over the wafer's drawing rectangle (the stage minus the title block and the legend band; x 0 → 1 left → right, y 0 → 1 bottom → top, like a cartesian plot); an object refines `mode` / `drag` / `keyboard` / `minRangePx` / `resetButton` / `pan` / `wheel` / `pinch` / `inside`. Off by default. `zoomTo` / `zoomBy` / `panBy` / `resetZoom` work regardless of the gesture switches. Property-only.

| Item | Value |
| --- | --- |
| JavaScript property | `zoom` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `CartesianZoomInput` |
| Default | `undefined` |
| Literals in the type | `auto`, `off`, `true`, `false`, `x`, `y`, `xy`, `inside` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CartesianZoomInput](https://chart.syidax.com/docs/types/CartesianZoomInput.md) — Type definition

<a id="property-streamSource"></a>

### streamSource

A bound die ring (script-set): the chart renders ITS tracked dies on top of `values` and follows its events; unset, the chart keeps an internal ring that the stream methods feed.

| Item | Value |
| --- | --- |
| JavaScript property | `streamSource` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `WaferMapStreamSource` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [WaferMapStreamSource](https://chart.syidax.com/docs/types/WaferMapStreamSource.md) — Type definition

<a id="property-streamMax"></a>

### streamMax

Streamed dies tracked at most (the ring's capacity, default 1,000,000): past it the OLDEST streamed dies leave (`windowSlid`) and revert to the base map. A re-sent cell replaces its result and moves to the newest position.

| Item | Value |
| --- | --- |
| JavaScript property | `streamMax` |
| HTML attribute | `stream-max` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-streamWindow"></a>

### streamWindow

The newest N streamed dies the chart renders on top of `values` (every tracked die when unset); older streamed dies revert to the base map — or to "no data" where the base has none.

| Item | Value |
| --- | --- |
| JavaScript property | `streamWindow` |
| HTML attribute | `stream-window` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-animated"></a>

### animated

Animate: the initial reveal grows the dies into place from the wafer centre outward; a `values` change and every stream event cross-fade each die whose colour changed from the colour it showed to the next one.

| Item | Value |
| --- | --- |
| JavaScript property | `animated` |
| HTML attribute | `animate` |
| Type | `boolean` |
| Default | `false` |

<a id="property-animationDuration"></a>

### animationDuration

Animation duration in milliseconds.

| Item | Value |
| --- | --- |
| JavaScript property | `animationDuration` |
| HTML attribute | `animation-duration` |
| Type | `number` |
| Default | `600` |

<a id="property-animationEasing"></a>

### animationEasing

Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.

| Item | Value |
| --- | --- |
| JavaScript property | `animationEasing` |
| HTML attribute | `animation-easing` |
| Type | `WaferMapEasing` |
| Default | `'ease-out'` |
| Allowed values | `linear`, `ease-out`, `ease-in`, `ease-in-out` |

- [WaferMapEasing](https://chart.syidax.com/docs/types/WaferMapEasing.md) — Type definition

<a id="property-animationType"></a>

### animationType

`initial` = the reveal only; `update` = the change morph only; unset = both.

| Item | Value |
| --- | --- |
| JavaScript property | `animationType` |
| HTML attribute | `animation-type` |
| Type | `WaferMapAnimationType` |
| Default | `undefined` |
| Allowed values | `initial`, `update` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [WaferMapAnimationType](https://chart.syidax.com/docs/types/WaferMapAnimationType.md) — Type definition

<a id="property-engine"></a>

### engine

Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type.

| Item | Value |
| --- | --- |
| JavaScript property | `engine` |
| HTML attribute | `engine` |
| Type | `WaferMapEngineMode` |
| Default | `'auto'` |
| Allowed values | `auto`, `standard`, `pro` |

- [WaferMapEngineMode](https://chart.syidax.com/docs/types/WaferMapEngineMode.md) — Type definition

<a id="property-unavailable"></a>

### unavailable

Allowed values: fallback, error, throw. Default: 'fallback'.

| Item | Value |
| --- | --- |
| JavaScript property | `unavailable` |
| HTML attribute | `unavailable` |
| Type | `WaferMapUnavailableBehaviour` |
| Default | `'fallback'` |
| Allowed values | `fallback`, `error`, `throw` |

- [WaferMapUnavailableBehaviour](https://chart.syidax.com/docs/types/WaferMapUnavailableBehaviour.md) — Type definition

<a id="events"></a>

## Events

<a id="event-rendered"></a>

### rendered

Emits rendering results in detail when chart drawing completes.

Event name: `rendered`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<WaferMapRenderResult & { tier: WaferMapEngineTier }>`.

```javascript
chart.addEventListener('rendered', event => {
  console.log(event.detail); // WaferMapRenderResult & { tier: WaferMapEngineTier }
});
```

- [WaferMapRenderResult](https://chart.syidax.com/docs/types/WaferMapRenderResult.md) — Type definition
- [WaferMapEngineTier](https://chart.syidax.com/docs/types/WaferMapEngineTier.md) — Type definition

<a id="event-dieHover"></a>

### dieHover

Pointer entered/left a die (`null` on leave).

Event name: `dieHover`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<WaferDieEventDetail | null>`.

```javascript
chart.addEventListener('dieHover', event => {
  console.log(event.detail); // WaferDieEventDetail | null
});
```

- [WaferDieEventDetail](https://chart.syidax.com/docs/types/WaferDieEventDetail.md) — Type definition

<a id="event-dieClick"></a>

### dieClick

A die was clicked.

Event name: `dieClick`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<WaferDieEventDetail>`.

```javascript
chart.addEventListener('dieClick', event => {
  console.log(event.detail); // WaferDieEventDetail
});
```

- [WaferDieEventDetail](https://chart.syidax.com/docs/types/WaferDieEventDetail.md) — Type definition

<a id="event-dieSelect"></a>

### dieSelect

Selection changed (click toggles; `null` when cleared).

Event name: `dieSelect`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<WaferDieEventDetail | null>`.

```javascript
chart.addEventListener('dieSelect', event => {
  console.log(event.detail); // WaferDieEventDetail | null
});
```

- [WaferDieEventDetail](https://chart.syidax.com/docs/types/WaferDieEventDetail.md) — Type definition

<a id="event-pointContextMenu"></a>

### pointContextMenu

A die was right-clicked (the shared point context-menu detail: the die + the pointer's local / viewport position).

Event name: `pointContextMenu`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<ChartPointContextMenuEventDetail<WaferDieEventDetail>>`.

```javascript
chart.addEventListener('pointContextMenu', event => {
  console.log(event.detail); // ChartPointContextMenuEventDetail<WaferDieEventDetail>
});
```

- [ChartPointContextMenuEventDetail](https://chart.syidax.com/docs/types/ChartPointContextMenuEventDetail.md) — Type definition
- [WaferDieEventDetail](https://chart.syidax.com/docs/types/WaferDieEventDetail.md) — Type definition

<a id="event-appended"></a>

### appended

Dies streamed in (`appendPoint` / `appendDie` / `appendBatch` / `updateDie`): the dies the ring stored.

Event name: `appended`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<{ count: number }>`.

```javascript
chart.addEventListener('appended', event => {
  console.log(event.detail); // { count: number }
});
```

<a id="event-windowSlid"></a>

### windowSlid

The oldest streamed dies left the ring (`stream-max`) or were shifted out — they revert to the base map.

Event name: `windowSlid`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<{ dropped: number }>`.

```javascript
chart.addEventListener('windowSlid', event => {
  console.log(event.detail); // { dropped: number }
});
```

<a id="event-chartAnimationStart"></a>

### chartAnimationStart

CustomEvent.detail type: void. Event names are case-sensitive.

Event name: `chartAnimationStart`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<void>`.

```javascript
chart.addEventListener('chartAnimationStart', event => {
  console.log(event.detail); // void
});
```

<a id="event-chartAnimationEnd"></a>

### chartAnimationEnd

CustomEvent.detail type: void. Event names are case-sensitive.

Event name: `chartAnimationEnd`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<void>`.

```javascript
chart.addEventListener('chartAnimationEnd', event => {
  console.log(event.detail); // void
});
```

<a id="event-chartAnimationInterrupted"></a>

### chartAnimationInterrupted

CustomEvent.detail type: void. Event names are case-sensitive.

Event name: `chartAnimationInterrupted`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<void>`.

```javascript
chart.addEventListener('chartAnimationInterrupted', event => {
  console.log(event.detail); // void
});
```

<a id="event-binChanged"></a>

### binChanged

An upsert CHANGED an already-probed die's bin (a re-test flipping the verdict) — the signal a live yield display keys on.

Event name: `binChanged`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<{
    col: number; row: number; ix: number; iy: number;
    previousBin: number | string; bin: number | string;
  }>`.

```javascript
chart.addEventListener('binChanged', event => {
  console.log(event.detail); // {
    col: number; row: number; ix: number; iy: number;
    previousBin: number | string; bin: number | string;
  }
});
```

<a id="event-zoomChange"></a>

### zoomChange

Storybook parity (2026-09-10) — fired after every zoom change (drag / pan / wheel / pinch / keyboard / api / reset) with the new state.

Event name: `zoomChange`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<CartesianZoomChangeEventDetail>`.

```javascript
chart.addEventListener('zoomChange', event => {
  console.log(event.detail); // CartesianZoomChangeEventDetail
});
```

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition

<a id="methods"></a>

## Methods

<a id="method-getDefectSummary"></a>

### getDefectSummary

Per-class defect counts over the on-wafer points (`overlay="defect"`).

```typescript
getDefectSummary(): Promise<{ total: number; offWafer: number; byClass: Array<{ key: string; count: number }> }>
```

Return type: `Promise<{ total: number; offWafer: number; byClass: Array<{ key: string; count: number }> }>`. Call the method after element registration and await its Promise result.

<a id="method-getShotOf"></a>

### getShotOf

Shot (reticle exposure) coordinate of a lattice cell.

```typescript
getShotOf(col: number, row: number): Promise<{ shotCol: number; shotRow: number }>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `col` | `number` | Required |
| `row` | `number` | Required |

Return type: `Promise<{ shotCol: number; shotRow: number }>`. Call the method after element registration and await its Promise result.

<a id="method-hitTestDie"></a>

### hitTestDie

Die under a component-local CSS point, or null (streets, off-wafer).

```typescript
hitTestDie(cssX: number, cssY: number): Promise<WaferDieEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `cssX` | `number` | Required |
| `cssY` | `number` | Required |

Return type: `Promise<WaferDieEventDetail | null>`. Call the method after element registration and await its Promise result.

- [WaferDieEventDetail](https://chart.syidax.com/docs/types/WaferDieEventDetail.md) — Type definition

<a id="method-selectDie"></a>

### selectDie

Select a die programmatically (null-safe no-op off the lattice).

```typescript
selectDie(col: number, row: number): Promise<WaferDieEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `col` | `number` | Required |
| `row` | `number` | Required |

Return type: `Promise<WaferDieEventDetail | null>`. Call the method after element registration and await its Promise result.

- [WaferDieEventDetail](https://chart.syidax.com/docs/types/WaferDieEventDetail.md) — Type definition

<a id="method-clearDieSelection"></a>

### clearDieSelection

Wafer map: clear the die selection.

```typescript
clearDieSelection(): Promise<void>
```

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-getSelectedDie"></a>

### getSelectedDie

The current selection (null when none).

```typescript
getSelectedDie(): Promise<WaferDieEventDetail | null>
```

Return type: `Promise<WaferDieEventDetail | null>`. Call the method after element registration and await its Promise result.

- [WaferDieEventDetail](https://chart.syidax.com/docs/types/WaferDieEventDetail.md) — Type definition

<a id="method-zoomTo"></a>

### zoomTo

Zoom to explicit windows of the drawing (`x` / `y` as `{ min, max }` or `[min, max]` fractions 0 … 1; `null` clears that orientation).

```typescript
zoomTo(request: CartesianZoomRequest): Promise<CartesianZoomChangeEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `request` | `CartesianZoomRequest` | Required |

Return type: `Promise<CartesianZoomChangeEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition
- [CartesianZoomRequest](https://chart.syidax.com/docs/types/CartesianZoomRequest.md) — Type definition

<a id="method-zoomBy"></a>

### zoomBy

Scale the current windows by `factor` (< 1 zooms in) around `anchorFraction` (0..1, default centre).

```typescript
zoomBy(factor: number, anchorFraction?: number): Promise<CartesianZoomChangeEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `factor` | `number` | Required |
| `anchorFraction` | `number` | Optional |

Return type: `Promise<CartesianZoomChangeEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition

<a id="method-panBy"></a>

### panBy

Slide the zoomed windows by fractions of the drawing (`{ x?, y? }`); a no-op at the full extent.

```typescript
panBy(delta: { x?: number; y?: number }): Promise<CartesianZoomChangeEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `delta` | `{ x?: number; y?: number }` | Required |

Return type: `Promise<CartesianZoomChangeEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition

<a id="method-resetZoom"></a>

### resetZoom

Reset the zoomed or panned range to the original data range.

```typescript
resetZoom(): Promise<CartesianZoomChangeEventDetail | null>
```

Return type: `Promise<CartesianZoomChangeEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition

<a id="method-getZoom"></a>

### getZoom

Read the current zoom range. Check the return type's nullability and the range for each axis.

```typescript
getZoom(): Promise<CartesianZoomState | null>
```

Return type: `Promise<CartesianZoomState | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomState](https://chart.syidax.com/docs/types/CartesianZoomState.md) — Type definition

<a id="method-getZoomExtent"></a>

### getZoomExtent

The full extent of the viewport axes (`[0, 1]` each, key `'0'`).

```typescript
getZoomExtent(request?: CartesianZoomExtentRequest): Promise<CartesianZoomExtentDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `request` | `CartesianZoomExtentRequest` | Optional |

Return type: `Promise<CartesianZoomExtentDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomExtentDetail](https://chart.syidax.com/docs/types/CartesianZoomExtentDetail.md) — Type definition
- [CartesianZoomExtentRequest](https://chart.syidax.com/docs/types/CartesianZoomExtentRequest.md) — Type definition

<a id="method-setData"></a>

### setData

Replace the die data set (facade `setData` route) — the base map; the streamed dies stay on top of it.

```typescript
setData(values: WaferMapData): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `values` | `WaferMapData` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [WaferMapData](https://chart.syidax.com/docs/types/WaferMapData.md) — Type definition

<a id="method-appendPoint"></a>

### appendPoint

Append one value to the stream. Check the argument type and the licensing requirements for streaming.

```typescript
appendPoint(datum: WaferDieDatum): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `datum` | `WaferDieDatum` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [WaferDieDatum](https://chart.syidax.com/docs/types/WaferDieDatum.md) — Type definition

<a id="method-appendDie"></a>

### appendDie

Stream one probe result in () — the wafer's name for `appendPoint`.

```typescript
appendDie(datum: WaferDieDatum): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `datum` | `WaferDieDatum` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [WaferDieDatum](https://chart.syidax.com/docs/types/WaferDieDatum.md) — Type definition

<a id="method-appendBatch"></a>

### appendBatch

Append multiple values to the stream. Check the argument type and the licensing requirements for streaming.

```typescript
appendBatch(data: WaferMapData): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `data` | `WaferMapData` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [WaferMapData](https://chart.syidax.com/docs/types/WaferMapData.md) — Type definition

<a id="method-shift"></a>

### shift

Drop the `count` oldest streamed dies (`windowSlid`); they revert to the base map. Without `chart.streaming` there is no streamed set apart from the base, and the base never leaves: nothing is dropped.

```typescript
shift(count: number): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `count` | `number` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-replace"></a>

### replace

Swap the streamed set (`replace([])` clears it); the base `values` never leave. Without `chart.streaming` the dies upsert into the base like a batch (quietly: no `appended`, no `binChanged`, as a ring replace).

```typescript
replace(data: WaferMapData): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `data` | `WaferMapData` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [WaferMapData](https://chart.syidax.com/docs/types/WaferMapData.md) — Type definition

<a id="method-getStreamSource"></a>

### getStreamSource

The die ring in use: the bound `stream-source`, else the internal one (undefined before the first push, and without `chart.streaming`).

```typescript
getStreamSource(): Promise<WaferMapStreamSource | undefined>
```

Return type: `Promise<WaferMapStreamSource | undefined>`. Call the method after element registration and await its Promise result.

- [WaferMapStreamSource](https://chart.syidax.com/docs/types/WaferMapStreamSource.md) — Type definition

<a id="method-updateDie"></a>

### updateDie

Patch an existing die's data (creates the cell when absent — a late probe log is still a probe log): the merged result streams in through the ring. Returns the resulting detail.

```typescript
updateDie(col: number, row: number, patch: { bin?: number | string; value?: number }): Promise<WaferDieEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `col` | `number` | Required |
| `row` | `number` | Required |
| `patch` | `{ bin?: number \| string; value?: number }` | Required |

Return type: `Promise<WaferDieEventDetail | null>`. Call the method after element registration and await its Promise result.

- [WaferDieEventDetail](https://chart.syidax.com/docs/types/WaferDieEventDetail.md) — Type definition

<a id="method-setAnimation"></a>

### setAnimation

An asynchronous method. Check the argument and return types below.

```typescript
setAnimation(options: { duration?: number; easing?: WaferMapEasing; enabled?: boolean; type?: WaferMapAnimationType }): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `options` | `{ duration?: number; easing?: WaferMapEasing; enabled?: boolean; type?: WaferMapAnimationType }` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [WaferMapEasing](https://chart.syidax.com/docs/types/WaferMapEasing.md) — Type definition
- [WaferMapAnimationType](https://chart.syidax.com/docs/types/WaferMapAnimationType.md) — Type definition

<a id="method-pauseAnimation"></a>

### pauseAnimation

Pause the current animation.

```typescript
pauseAnimation(): Promise<void>
```

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-resumeAnimation"></a>

### resumeAnimation

Resume a paused animation.

```typescript
resumeAnimation(): Promise<void>
```

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-replayAnimation"></a>

### replayAnimation

Run the reveal again.

```typescript
replayAnimation(): Promise<void>
```

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-getDieCounts"></a>

### getDieCounts

Layout + grid summary for tooling/specs.

```typescript
getDieCounts(): Promise<{ dies: number; fullDies: number; partialDies: number }>
```

Return type: `Promise<{ dies: number; fullDies: number; partialDies: number }>`. Call the method after element registration and await its Promise result.

<a id="method-getYield"></a>

### getYield

Pass/fail/yield summary over the probed dies (any mode).

```typescript
getYield(): Promise<BinarySummary>
```

Return type: `Promise<BinarySummary>`. Call the method after element registration and await its Promise result.

- [BinarySummary](https://chart.syidax.com/docs/types/BinarySummary.md) — Type definition

<a id="method-getValueStats"></a>

### getValueStats

Descriptive statistics over the measured on-wafer values (any mode).

```typescript
getValueStats(): Promise<WaferValueStats>
```

Return type: `Promise<WaferValueStats>`. Call the method after element registration and await its Promise result.

- [WaferValueStats](https://chart.syidax.com/docs/types/WaferValueStats.md) — Type definition

<a id="method-getDieIndex"></a>

### getDieIndex

Map index of a notch-frame lattice cell, or null when off the wafer.

```typescript
getDieIndex(col: number, row: number): Promise<DieIndexEntry | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `col` | `number` | Required |
| `row` | `number` | Required |

Return type: `Promise<DieIndexEntry | null>`. Call the method after element registration and await its Promise result.

- [DieIndexEntry](https://chart.syidax.com/docs/types/DieIndexEntry.md) — Type definition

<a id="method-getDieByIndex"></a>

### getDieByIndex

Die entry addressed by its map index, or null.

```typescript
getDieByIndex(ix: number, iy: number): Promise<DieIndexEntry | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `ix` | `number` | Required |
| `iy` | `number` | Required |

Return type: `Promise<DieIndexEntry | null>`. Call the method after element registration and await its Promise result.

- [DieIndexEntry](https://chart.syidax.com/docs/types/DieIndexEntry.md) — Type definition

<a id="method-getActiveTier"></a>

### getActiveTier

An asynchronous method. Check the argument and return types below.

```typescript
getActiveTier(): Promise<WaferMapEngineTier>
```

Return type: `Promise<WaferMapEngineTier>`. Call the method after element registration and await its Promise result.

- [WaferMapEngineTier](https://chart.syidax.com/docs/types/WaferMapEngineTier.md) — Type definition

<a id="method-redraw"></a>

### redraw

Redraw the chart using its current data and options. Inspect the rendered result after the returned Promise resolves.

```typescript
redraw(): Promise<WaferMapRenderResult>
```

Return type: `Promise<WaferMapRenderResult>`. Call the method after element registration and await its Promise result.

- [WaferMapRenderResult](https://chart.syidax.com/docs/types/WaferMapRenderResult.md) — Type definition

<a id="method-getEngineStatus"></a>

### getEngineStatus

Requested engine vs what runs, and why (CHART-ADD-08): always Standard (this type has no WebGPU renderer); read without side effects, never consults the license.

```typescript
getEngineStatus(): Promise<ChartEngineStatus>
```

Return type: `Promise<ChartEngineStatus>`. Call the method after element registration and await its Promise result.

- [ChartEngineStatus](https://chart.syidax.com/docs/types/ChartEngineStatus.md) — Type definition