Wafer Map.
COMMUNITYShow status and measurements at die coordinates on a wafer.
LIVE EXAMPLE
Bin classification
Interact with the chart to see selection and range-change results here.
OptionsChanges are reflected in the preview and code.
Appearance and style11
Legend and interaction7
Title and dimensions3
Inspect wafer defect distribution by die coordinates and bins. All values are sample data.
View code
Current preview
<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>Usage and data
#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.
Data contract
| Property | Input format |
|---|---|
values | An array of dies as { col, row, bin?, value? }. |
mode | Choose grid, bin, binary, or value. |
passBin | The bin interpreted as a pass. |
Updating data
Assign a new array or object to the property instead of mutating values inside an array. Chart events provide selection results through event.detail. When disposing of the view, clean up ResizeObserver and event listeners registered by your app.
Feature examples
#Try 16 interactive feature examples and inspect their code. Select “Edit in preview” to combine more options in the settings panel above.
Wafer orientation
Rotate the reference orientation to inspect the same die distribution.
Interact with the chart to see results here.
View code
Edge exclusion
Show the edge-exclusion area alongside aggregation results.
Interact with the chart to see results here.
View code
Drag to zoom and pan
Drag to zoom and hold Shift to pan. Use Ctrl + wheel to zoom in or out.
Interact with the chart to see results here.
View code
Replay animation
Redraw the same example to inspect its initial display animation.
Interact with the chart to see results here.
View code
Animation
Compare 1 examples of Animation. Buttons and options update both the live result and source code.
Interact with the chart to see results here.
View code
Legend
Compare 2 examples of Legend. Buttons and options update both the live result and source code.
Interact with the chart to see results here.
View code
Large datasets
Compare 1 examples of Large datasets. Buttons and options update both the live result and source code.
Interact with the chart to see results here.
View code
Size
Compare 1 examples of Size. Buttons and options update both the live result and source code.
Interact with the chart to see results here.
View code
Tooltip
Compare 1 examples of Tooltip. Buttons and options update both the live result and source code.
Interact with the chart to see results here.
View code
Data input
Compare 1 examples of Data input. Buttons and options update both the live result and source code.
Interact with the chart to see results here.
View code
Zoom and pan
Compare 6 examples of Zoom and pan. Buttons and options update both the live result and source code.
Interact with the chart to see results here.
View code
Context menu
Compare 1 examples of Context menu. Buttons and options update both the live result and source code.
Interact with the chart to see results here.
View code
Data context menu
Compare 1 examples of Data context menu. Buttons and options update both the live result and source code.
Interact with the chart to see results here.
View code
Read coordinates and data
Compare 1 examples of Read coordinates and data. Buttons and options update both the live result and source code.
Interact with the chart to see results here.
View code
Overview
Compare 10 examples of Overview. Buttons and options update both the live result and source code.
Interact with the chart to see results here.
View code
Streaming · Add and update live dataPRO
Compare 4 examples of Add and update live data. Buttons and options update both the live result and source code.
Interact with the chart to see results here.
View code
Add to your interface
#The code tabs below the preview contain the full data, options, event bindings, and responsive sizing for the current example. Copy them into an app project, such as Vite, that can resolve the installed packages.
API reference
#The full public API for sy-wafer-map. Pass objects and arrays as JavaScript properties. Select a name to view usage code and type definitions.
Key properties
| Attribute / Property | Type / Default | Description |
|---|---|---|
numberDefault: 520 | Chart width in pixels. Update with ResizeObserver when the container changes. | |
numberDefault: 500 | Chart height in pixels. | |
| brandLogo | stringDefault: undefined | The default is the Syidax logo. With the Pro chart.branding entitlement, use none or a PNG, JPEG, or WebP data URL. |
| brandPosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'Default: 'bottom-right' | The corner where the logo is anchored. Applies equally to Community and Pro, on screen and in image exports. |
| edgeExclusion | numberDefault: 3 | Unusable edge band in mm (default 3). |
WaferIndicatorDefault: 'notch' | Orientation-mark kind: `notch` (300 mm standard) / `flat` (legacy) / `none`. | |
WaferOrientationDefault: 'down' | Where the mark points (fab standard: `down`). | |
| scribeX | numberDefault: 0.2 | Scribe-street widths in mm (defaults 0.2). |
| scribeY | numberDefault: 0.2 | Set as an HTML attribute or JavaScript property. type: number. |
WaferMapDataDefault: undefined | An array of dies as { col, row, bin?, value? }. | |
WaferMapModeDefault: 'grid' | Choose grid, bin, binary, or value. | |
| passBin | number | stringDefault: 1 | The bin interpreted as a pass. |
| showStats | booleanDefault: true | Show the min/mean/σ/median statistics line under the value legend. |
| binLegend | booleanDefault: true | Show the bin legend under the wafer (bin mode). |
| legendPosition | WaferMapLegendPositionDefault: 'bottom' | Where the legend is positioned. |
| showPartial | booleanDefault: true | Draw edge (partial) dies. |
| showExclusion | booleanDefault: true | Draw the dashed edge-exclusion ring. |
| showDieIndex | booleanDefault: false | Print `ix,iy` inside each die (auto-hides when dies get too small). |
| chartTitle | stringDefault: undefined | The title inside the chart. Explain the data's unit and meaning alongside it. |
| chartSubtitle | stringDefault: undefined | The subtitle inside the chart. |
| tooltipShow | booleanDefault: true | Whether to display the built-in tooltip. |
CartesianZoomInputDefault: undefined | Settings for zooming and the visible range. | |
| animated | booleanDefault: false | Whether to animate initial display and data changes. |
| animationDuration | numberDefault: 600 | Animation duration in milliseconds. |
| animationEasing | WaferMapEasingDefault: 'ease-out' | Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'. |
| animationType | WaferMapAnimationTypeDefault: undefined | `initial` = the reveal only; `update` = the change morph only; unset = both. |
Other properties 38
| Attribute / Property | Type / Default | Description |
|---|---|---|
numberDefault: 300 | Wafer diameter in mm (default 300). | |
| flatLength | numberDefault: undefined | Flat chord length in mm (default diameter × 0.2). |
| notchDepth | numberDefault: undefined | Notch depth in mm (default 2.5). |
| dieWidth | numberDefault: 10 | Die size in mm (defaults 10 × 10). |
| dieHeight | numberDefault: 10 | Set as an HTML attribute or JavaScript property. type: number. |
| offsetX | numberDefault: 0 | Grid shift in mm relative to the centred lattice. |
| offsetY | numberDefault: 0 | Set as an HTML attribute or JavaScript property. type: number. |
| binColors | Readonly<Record<string, string>>Default: undefined | Explicit per-bin colours (`{ [bin]: colour }`) — bin mode only. |
| passColor | stringDefault: '#16a34a' | Pass-bin fill. |
| failColor | stringDefault: '#dc2626' | Fail fill (`mode="binary"` — every non-pass bin). |
| colorAxis | WaferValueAxisInputDefault: 'auto' | 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`. |
'none' | 'defect'Default: 'none' | Overlay layer on top of any mode: `none` / `defect`. | |
'die' | 'shot'Default: 'die' | Grid chrome: `die` (scribe streets only) or `shot` (+ reticle boundaries). | |
| shotCols | numberDefault: 3 | Dies per exposure shot (defaults 3 × 2). |
| shotRows | numberDefault: 2 | Set as an HTML attribute or JavaScript property. type: number. |
| shotOffsetX | numberDefault: 0 | Shot-grid alignment shift in whole dies. |
| shotOffsetY | numberDefault: 0 | Set as an HTML attribute or JavaScript property. type: number. |
| shotColor | stringDefault: '#334155' | Shot boundary stroke. |
WaferDefectDataDefault: undefined | Inspection defects (`{x, y, class?, size?}`, wafer mm, notch frame). | |
| defectColor | stringDefault: '#0f172a' | Dot colour for unclassified defects (classes cycle the palette). |
keyof typeof categoricalDefault: 'tableau10' | Categorical palette cycled over fail bins (sorted order). | |
| legendFloatAlign | 'start' | 'center' | 'end'Default: 'end' | `legend-position="float"`: the overlay's horizontal anchor inside the drawing rectangle. |
| legendFloatVerticalAlign | 'top' | 'middle' | 'bottom'Default: 'top' | `legend-position="float"`: the overlay's vertical anchor inside the drawing rectangle. |
| legendDraggable | booleanDefault: false | `legend-position="float"`: the floating legend can be dragged inside the chart bounds. |
| dieIndexOrigin | DieIndexOriginDefault: 'top-left' | 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. |
| dieIndexBase | numberDefault: 0 | First index value (0 or 1). |
| waferColor | string | ReadonlyArray<string>Default: '#eef2f7' | Substrate disc fill. |
| dieColor | string | ReadonlyArray<string>Default: '#cbd5e1' | Full (probeable) die fill. |
| partialColor | string | ReadonlyArray<string>Default: '#e2e8f0' | Edge (partial) die fill. |
| dataColor | string | ReadonlyArray<string>Default: '#2563eb' | Fill for dies that carry data (until the mode days colour by it). |
| edgeColor | stringDefault: 'rgba(255,255,255,0.9)' | Scribe-street stroke between dies. |
| outlineColor | stringDefault: '#64748b' | Wafer outline stroke. |
| tooltipFormat | (detail: WaferDieEventDetail) => stringDefault: undefined | Custom tooltip text (return a string; default: index · bin/value · shot). |
| streamSource | WaferMapStreamSourceDefault: undefined | A stream source for live data. Check the contract for the specific type. |
| streamMax | numberDefault: undefined | The maximum number of streaming data points to retain. |
| streamWindow | numberDefault: undefined | The streaming data range to keep visible. |
WaferMapEngineModeDefault: 'auto' | Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type. | |
WaferMapUnavailableBehaviourDefault: 'fallback' | Allowed values: fallback, error, throw. Default: 'fallback'. |
Events 12
| Events | Detail type | Description |
|---|---|---|
WaferMapRenderResult & { tier: WaferMapEngineTier } | Emits rendering results in detail when chart drawing completes. | |
WaferDieEventDetail | null | Pointer entered/left a die (`null` on leave). | |
WaferDieEventDetail | A die was clicked. | |
WaferDieEventDetail | null | Selection changed (click toggles; `null` when cleared). | |
ChartPointContextMenuEventDetail<WaferDieEventDetail> | A die was right-clicked (the shared point context-menu detail: the die + the pointer's local / viewport position). | |
{ count: number } | Dies streamed in (`appendPoint` / `appendDie` / `appendBatch` / `updateDie`): the dies the ring stored. | |
{ dropped: number } | The oldest streamed dies left the ring (`stream-max`) or were shifted out — they revert to the base map. | |
void | CustomEvent.detail type: void. Event names are case-sensitive. | |
void | CustomEvent.detail type: void. Event names are case-sensitive. | |
void | CustomEvent.detail type: void. Event names are case-sensitive. | |
{
col: number; row: number; ix: number; iy: number;
previousBin: number | string; bin: number | string;
} | An upsert CHANGED an already-probed die's bin (a re-test flipping the verdict) — the signal a live yield display keys on. | |
CartesianZoomChangeEventDetail | Storybook parity (2026-09-10) — fired after every zoom change (drag / pan / wheel / pinch / keyboard / api / reset) with the new state. |
Methods 32
Stencil methods return Promises. Use await within an async function to read the result.
| Method / Arguments | Return type | Description |
|---|---|---|
Promise<{ total: number; offWafer: number; byClass: Array<{ key: string; count: number }> }> | Per-class defect counts over the on-wafer points (`overlay="defect"`). | |
| col: number, row: number | Promise<{ shotCol: number; shotRow: number }> | Shot (reticle exposure) coordinate of a lattice cell. |
| cssX: number, cssY: number | Promise<WaferDieEventDetail | null> | Die under a component-local CSS point, or null (streets, off-wafer). |
| col: number, row: number | Promise<WaferDieEventDetail | null> | Select a die programmatically (null-safe no-op off the lattice). |
Promise<void> | An asynchronous method. Check the argument and return types below. | |
Promise<WaferDieEventDetail | null> | The current selection (null when none). | |
| request: CartesianZoomRequest | Promise<CartesianZoomChangeEventDetail | null> | Zoom to explicit windows of the drawing (`x` / `y` as `{ min, max }` or `[min, max]` fractions 0 … 1; `null` clears that orientation). |
| factor: number, anchorFraction?: number | Promise<CartesianZoomChangeEventDetail | null> | Scale the current windows by `factor` (< 1 zooms in) around `anchorFraction` (0..1, default centre). |
| delta: { x?: number; y?: number } | Promise<CartesianZoomChangeEventDetail | null> | Slide the zoomed windows by fractions of the drawing (`{ x?, y? }`); a no-op at the full extent. |
Promise<CartesianZoomChangeEventDetail | null> | Back to the full drawing. | |
Promise<CartesianZoomState | null> | The current zoom state (`null` = the full drawing). | |
| request?: CartesianZoomExtentRequest | Promise<CartesianZoomExtentDetail | null> | The full extent of the viewport axes (`[0, 1]` each, key `'0'`). |
| values: WaferMapData | Promise<void> | Replace the die data set (facade `setData` route) — the base map; the streamed dies stay on top of it. |
| datum: WaferDieDatum | Promise<void> | Stream one probe result in: an upsert by cell into the die ring (a re-probed die replaces its result and moves to the newest position; when its BIN changes, `binChanged` carries the previous verdict). The universal name of the stream surface — `appendDie` is the wafer's own alias of it. |
| datum: WaferDieDatum | Promise<void> | An asynchronous method. Check the argument and return types below. |
| data: WaferMapData | Promise<void> | Stream a batch of probe results (one repaint, one `appended`). |
| count: number | Promise<void> | 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. |
| data: WaferMapData | Promise<void> | 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). |
Promise<WaferMapStreamSource | undefined> | The die ring in use: the bound `stream-source`, else the internal one (undefined before the first push, and without `chart.streaming`). | |
| col: number, row: number, patch: { bin?: number | string; value?: number } | Promise<WaferDieEventDetail | null> | 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. |
| options: { duration?: number; easing?: WaferMapEasing; enabled?: boolean; type?: WaferMapAnimationType } | Promise<void> | An asynchronous method. Check the argument and return types below. |
Promise<void> | An asynchronous method. Check the argument and return types below. | |
Promise<void> | An asynchronous method. Check the argument and return types below. | |
Promise<void> | Run the reveal again. | |
Promise<{ dies: number; fullDies: number; partialDies: number }> | Layout + grid summary for tooling/specs. | |
Promise<BinarySummary> | Pass/fail/yield summary over the probed dies (any mode). | |
Promise<WaferValueStats> | Descriptive statistics over the measured on-wafer values (any mode). | |
| col: number, row: number | Promise<DieIndexEntry | null> | Map index of a notch-frame lattice cell, or null when off the wafer. |
| ix: number, iy: number | Promise<DieIndexEntry | null> | Die entry addressed by its map index, or null. |
Promise<WaferMapEngineTier> | An asynchronous method. Check the argument and return types below. | |
Promise<WaferMapRenderResult> | An asynchronous method. Check the argument and return types below. | |
Promise<ChartEngineStatus> | 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. |
No matching APIs.