sy-wafer-map
Wafer Map
Show status and measurements at die coordinates on a wafer.
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
Change options and view framework-specific code
- Shared installation and integration
Complete implementation example
<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>Properties
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 |
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 |
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.
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 |
diameter
Wafer diameter in mm (default 300).
| Item | Value |
|---|---|
| JavaScript property | diameter |
| HTML attribute | diameter |
| Type | number |
| Default | 300 |
edgeExclusion
Unusable edge band in mm (default 3).
| Item | Value |
|---|---|
| JavaScript property | edgeExclusion |
| HTML attribute | edge-exclusion |
| Type | number |
| Default | 3 |
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
Type definition
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
Type definition
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.
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.
dieWidth
Die size in mm (defaults 10 × 10).
| Item | Value |
|---|---|
| JavaScript property | dieWidth |
| HTML attribute | die-width |
| Type | number |
| Default | 10 |
dieHeight
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | dieHeight |
| HTML attribute | die-height |
| Type | number |
| Default | 10 |
scribeX
Scribe-street widths in mm (defaults 0.2).
| Item | Value |
|---|---|
| JavaScript property | scribeX |
| HTML attribute | scribe-x |
| Type | number |
| Default | 0.2 |
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 |
offsetX
Grid shift in mm relative to the centred lattice.
| Item | Value |
|---|---|
| JavaScript property | offsetX |
| HTML attribute | offset-x |
| Type | number |
| Default | 0 |
offsetY
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | offsetY |
| HTML attribute | offset-y |
| Type | number |
| Default | 0 |
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
Type definition
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
Type definition
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.
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 |
passColor
Pass-bin fill.
| Item | Value |
|---|---|
| JavaScript property | passColor |
| HTML attribute | pass-color |
| Type | string |
| Default | '#16a34a' |
failColor
Fail fill (mode="binary" — every non-pass bin).
| Item | Value |
|---|---|
| JavaScript property | failColor |
| HTML attribute | fail-color |
| Type | string |
| Default | '#dc2626' |
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
Type definition
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 |
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 |
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 |
shotCols
Dies per exposure shot (defaults 3 × 2).
| Item | Value |
|---|---|
| JavaScript property | shotCols |
| HTML attribute | shot-cols |
| Type | number |
| Default | 3 |
shotRows
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | shotRows |
| HTML attribute | shot-rows |
| Type | number |
| Default | 2 |
shotOffsetX
Shot-grid alignment shift in whole dies.
| Item | Value |
|---|---|
| JavaScript property | shotOffsetX |
| HTML attribute | shot-offset-x |
| Type | number |
| Default | 0 |
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 |
shotColor
Shot boundary stroke.
| Item | Value |
|---|---|
| JavaScript property | shotColor |
| HTML attribute | shot-color |
| Type | string |
| Default | '#334155' |
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
Type definition
defectColor
Dot colour for unclassified defects (classes cycle the palette).
| Item | Value |
|---|---|
| JavaScript property | defectColor |
| HTML attribute | defect-color |
| Type | string |
| Default | '#0f172a' |
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 |
binLegend
Show the bin legend under the wafer (bin mode).
| Item | Value |
|---|---|
| JavaScript property | binLegend |
| HTML attribute | bin-legend |
| Type | boolean |
| Default | true |
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
Type definition
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 |
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 |
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 |
showPartial
Draw edge (partial) dies.
| Item | Value |
|---|---|
| JavaScript property | showPartial |
| HTML attribute | show-partial |
| Type | boolean |
| Default | true |
showExclusion
Draw the dashed edge-exclusion ring.
| Item | Value |
|---|---|
| JavaScript property | showExclusion |
| HTML attribute | show-exclusion |
| Type | boolean |
| Default | true |
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
Type definition
dieIndexBase
First index value (0 or 1).
| Item | Value |
|---|---|
| JavaScript property | dieIndexBase |
| HTML attribute | die-index-base |
| Type | number |
| Default | 0 |
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 |
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' |
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' |
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' |
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' |
edgeColor
Scribe-street stroke between dies.
| Item | Value |
|---|---|
| JavaScript property | edgeColor |
| HTML attribute | edge-color |
| Type | string |
| Default | 'rgba(255,255,255,0.9)' |
outlineColor
Wafer outline stroke.
| Item | Value |
|---|---|
| JavaScript property | outlineColor |
| HTML attribute | outline-color |
| Type | string |
| Default | '#64748b' |
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.
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.
tooltipShow
Die tooltip on hover ().
| Item | Value |
|---|---|
| JavaScript property | tooltipShow |
| HTML attribute | tooltip-show |
| Type | boolean |
| Default | true |
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
Type definition
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
Type definition
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
Type definition
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.
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.
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 |
animationDuration
Animation duration in milliseconds.
| Item | Value |
|---|---|
| JavaScript property | animationDuration |
| HTML attribute | animation-duration |
| Type | number |
| Default | 600 |
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
Type definition
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
Type definition
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
Type definition
Events
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 }>.
chart.addEventListener('rendered', event => {
console.log(event.detail); // WaferMapRenderResult & { tier: WaferMapEngineTier }
});- WaferMapRenderResult
Type definition
- WaferMapEngineTier
Type definition
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>.
chart.addEventListener('dieHover', event => {
console.log(event.detail); // WaferDieEventDetail | null
});- WaferDieEventDetail
Type definition
dieClick
A die was clicked.
Event name: dieClick. Names are case-sensitive. Read the payload from detail on CustomEvent<WaferDieEventDetail>.
chart.addEventListener('dieClick', event => {
console.log(event.detail); // WaferDieEventDetail
});- WaferDieEventDetail
Type definition
dieSelect
Selection changed (click toggles; null when cleared).
Event name: dieSelect. Names are case-sensitive. Read the payload from detail on CustomEvent<WaferDieEventDetail | null>.
chart.addEventListener('dieSelect', event => {
console.log(event.detail); // WaferDieEventDetail | null
});- WaferDieEventDetail
Type definition
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>>.
chart.addEventListener('pointContextMenu', event => {
console.log(event.detail); // ChartPointContextMenuEventDetail<WaferDieEventDetail>
});- ChartPointContextMenuEventDetail
Type definition
- WaferDieEventDetail
Type definition
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 }>.
chart.addEventListener('appended', event => {
console.log(event.detail); // { count: number }
});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 }>.
chart.addEventListener('windowSlid', event => {
console.log(event.detail); // { dropped: number }
});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>.
chart.addEventListener('chartAnimationStart', event => {
console.log(event.detail); // void
});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>.
chart.addEventListener('chartAnimationEnd', event => {
console.log(event.detail); // void
});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>.
chart.addEventListener('chartAnimationInterrupted', event => {
console.log(event.detail); // void
});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;
}>`.
chart.addEventListener('binChanged', event => {
console.log(event.detail); // {
col: number; row: number; ix: number; iy: number;
previousBin: number | string; bin: number | string;
}
});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>.
chart.addEventListener('zoomChange', event => {
console.log(event.detail); // CartesianZoomChangeEventDetail
});- CartesianZoomChangeEventDetail
Type definition
Methods
getDefectSummary
Per-class defect counts over the on-wafer points (overlay="defect").
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.
getShotOf
Shot (reticle exposure) coordinate of a lattice cell.
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.
hitTestDie
Die under a component-local CSS point, or null (streets, off-wafer).
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
Type definition
selectDie
Select a die programmatically (null-safe no-op off the lattice).
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
Type definition
clearDieSelection
Wafer map: clear the die selection.
clearDieSelection(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
getSelectedDie
The current selection (null when none).
getSelectedDie(): Promise<WaferDieEventDetail | null>Return type: Promise<WaferDieEventDetail | null>. Call the method after element registration and await its Promise result.
- WaferDieEventDetail
Type definition
zoomTo
Zoom to explicit windows of the drawing (x / y as { min, max } or [min, max] fractions 0 … 1; null clears that orientation).
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
Type definition
- CartesianZoomRequest
Type definition
zoomBy
Scale the current windows by factor (< 1 zooms in) around anchorFraction (0..1, default centre).
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
Type definition
panBy
Slide the zoomed windows by fractions of the drawing ({ x?, y? }); a no-op at the full extent.
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
Type definition
resetZoom
Reset the zoomed or panned range to the original data range.
resetZoom(): Promise<CartesianZoomChangeEventDetail | null>Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
getZoom
Read the current zoom range. Check the return type's nullability and the range for each axis.
getZoom(): Promise<CartesianZoomState | null>Return type: Promise<CartesianZoomState | null>. Call the method after element registration and await its Promise result.
- CartesianZoomState
Type definition
getZoomExtent
The full extent of the viewport axes ([0, 1] each, key '0').
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
Type definition
- CartesianZoomExtentRequest
Type definition
setData
Replace the die data set (facade setData route) — the base map; the streamed dies stay on top of it.
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
Type definition
appendPoint
Append one value to the stream. Check the argument type and the licensing requirements for streaming.
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
Type definition
appendDie
Stream one probe result in () — the wafer's name for appendPoint.
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
Type definition
appendBatch
Append multiple values to the stream. Check the argument type and the licensing requirements for streaming.
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
Type definition
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.
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.
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).
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
Type definition
getStreamSource
The die ring in use: the bound stream-source, else the internal one (undefined before the first push, and without chart.streaming).
getStreamSource(): Promise<WaferMapStreamSource | undefined>Return type: Promise<WaferMapStreamSource | undefined>. Call the method after element registration and await its Promise result.
- WaferMapStreamSource
Type definition
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.
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
Type definition
setAnimation
An asynchronous method. Check the argument and return types below.
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
Type definition
- WaferMapAnimationType
Type definition
pauseAnimation
Pause the current animation.
pauseAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
resumeAnimation
Resume a paused animation.
resumeAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
replayAnimation
Run the reveal again.
replayAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
getDieCounts
Layout + grid summary for tooling/specs.
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.
getYield
Pass/fail/yield summary over the probed dies (any mode).
getYield(): Promise<BinarySummary>Return type: Promise<BinarySummary>. Call the method after element registration and await its Promise result.
- BinarySummary
Type definition
getValueStats
Descriptive statistics over the measured on-wafer values (any mode).
getValueStats(): Promise<WaferValueStats>Return type: Promise<WaferValueStats>. Call the method after element registration and await its Promise result.
- WaferValueStats
Type definition
getDieIndex
Map index of a notch-frame lattice cell, or null when off the wafer.
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
Type definition
getDieByIndex
Die entry addressed by its map index, or null.
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
Type definition
getActiveTier
An asynchronous method. Check the argument and return types below.
getActiveTier(): Promise<WaferMapEngineTier>Return type: Promise<WaferMapEngineTier>. Call the method after element registration and await its Promise result.
- WaferMapEngineTier
Type definition
redraw
Redraw the chart using its current data and options. Inspect the rendered result after the returned Promise resolves.
redraw(): Promise<WaferMapRenderResult>Return type: Promise<WaferMapRenderResult>. Call the method after element registration and await its Promise result.
- WaferMapRenderResult
Type definition
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.
getEngineStatus(): Promise<ChartEngineStatus>Return type: Promise<ChartEngineStatus>. Call the method after element registration and await its Promise result.
- ChartEngineStatus
Type definition