# Yield Zone Chart
Summarize yield by zones from the center to the edge.
Canonical: https://chart.syidax.com/docs/components/yield-zone-chart/
## sy-yield-zone-chart
Inspect yield differences along the wafer's radius.
Sample counts may differ between zones. Check the number of eligible dies alongside yield.
Base chart tier: Community. Features such as additional renderers and custom branding have separate entitlement requirements.
| Input | Data description |
| --- | --- |
| `wafers` | The wafers to aggregate. |
| `values` | Alternatively, use one wafer's die array. |
| `zones` | The number of radial zones. |
- [Run in Components](https://chart.syidax.com/charts/yield-zone-chart) — Change options and view framework-specific code
- [Shared installation and integration](https://chart.syidax.com/docs/getting-started.md)
## Complete implementation example
```html
```
## 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 | `520` |
### 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` |
### wafers
The wafers to aggregate.
| Item | Value |
| --- | --- |
| JavaScript property | `wafers` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `ReadonlyArray` |
| Default | `undefined` |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- [WaferStackWafer](https://chart.syidax.com/docs/types/WaferStackWafer.md) — Type definition
### values
Alternatively, use one wafer's die array.
| 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
### zones
The number of radial zones.
| Item | Value |
| --- | --- |
| JavaScript property | `zones` |
| HTML attribute | `zones` |
| Type | `number` |
| Default | `5` |
### zoneEdges
Explicit ascending ring outer edges in mm (overrides `zones`).
| Item | Value |
| --- | --- |
| JavaScript property | `zoneEdges` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `ReadonlyArray` |
| Default | `undefined` |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
### passBin
Pass as a JavaScript property. type: number | string.
| Item | Value |
| --- | --- |
| JavaScript property | `passBin` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `number \| string` |
| Default | `1` |
### diameter
Wafer geometry.
| Item | Value |
| --- | --- |
| JavaScript property | `diameter` |
| HTML attribute | `diameter` |
| Type | `number` |
| Default | `300` |
### edgeExclusion
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
| --- | --- |
| JavaScript property | `edgeExclusion` |
| HTML attribute | `edge-exclusion` |
| Type | `number` |
| Default | `3` |
### indicator
Allowed values: none, flat, notch. Default: 'notch'.
| 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
### orientation
Allowed values: left, right, down, up. Default: '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
### dieWidth
Set as an HTML attribute or JavaScript property. type: number.
| 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
Set as an HTML attribute or JavaScript property. type: number.
| 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` |
### 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.
## Methods
### getZoneYields
Per-zone yields + overall (any time).
```typescript
getZoneYields(): Promise
```
Return type: `Promise`. Call the method after element registration and await its Promise result.
- [YieldZoneResult](https://chart.syidax.com/docs/types/YieldZoneResult.md) — Type definition