# Wafer Correlation
두 웨이퍼 집합의 공간 패턴을 비교합니다.
Canonical: https://chart.syidax.com/ko/docs/components/wafer-correlation/
## sy-wafer-correlation
공정 전후나 두 로트의 불량률·측정값 관계를 확인하세요.
같은 die 좌표와 기하 설정을 사용하세요. 상관관계만으로 원인을 판단하지 마세요.
기본 차트 등급: Community. 추가 렌더러·커스텀 브랜딩 등 기능의 권한은 별도입니다.
| 입력 | 데이터 설명 |
| --- | --- |
| `wafersA` | 첫 번째 웨이퍼 집합입니다. |
| `wafersB` | 두 번째 웨이퍼 집합입니다. |
| `metric` | fail-rate 또는 mean-value입니다. |
- [Components에서 실행하기](https://chart.syidax.com/charts/wafer-correlation) — 옵션 변경과 프레임워크별 코드
- [공통 설치와 연결](https://chart.syidax.com/ko/docs/getting-started.md)
## 전체 적용 예제
```html
```
## Properties
### width
차트의 너비를 px 단위로 지정합니다. 컨테이너 너비가 변하는 앱에서는 ResizeObserver에서 width를 갱신하세요.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `width` |
| HTML attribute | `width` |
| 타입 | `number` |
| 기본값 | `520` |
### height
차트의 높이를 px 단위로 지정합니다. 축, 제목과 범례가 차지하는 공간을 함께 고려하세요.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `height` |
| HTML attribute | `height` |
| 타입 | `number` |
| 기본값 | `540` |
### brandLogo
기본값은 Syidax 심볼과 워드마크입니다. Pro의 chart.branding 권한으로 none을 지정해 제거하거나 PNG·JPEG·WebP data URL로 교체할 수 있습니다.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `brandLogo` |
| HTML attribute | `brand-logo` |
| 타입 | `string` |
| 기본값 | `undefined` |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
### brandPosition
로고를 고정할 코너입니다. Community·Pro 모두 네 코너 중 하나를 선택할 수 있으며 화면과 이미지 내보내기에 같은 위치를 사용합니다.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `brandPosition` |
| HTML attribute | `brand-position` |
| 타입 | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` |
| 기본값 | `'bottom-right'` |
| 허용값 | `top-left`, `top-right`, `bottom-left`, `bottom-right` |
### wafersA
첫 번째 웨이퍼 집합입니다.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `wafersA` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `ReadonlyArray` |
| 기본값 | `undefined` |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
- [WaferStackWafer](https://chart.syidax.com/ko/docs/types/WaferStackWafer.md) — 타입 정의
### wafersB
두 번째 웨이퍼 집합입니다.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `wafersB` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `ReadonlyArray` |
| 기본값 | `undefined` |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
- [WaferStackWafer](https://chart.syidax.com/ko/docs/types/WaferStackWafer.md) — 타입 정의
### metric
fail-rate 또는 mean-value입니다.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `metric` |
| HTML attribute | `metric` |
| 타입 | `WaferCorrelationMetric` |
| 기본값 | `'fail-rate'` |
| 허용값 | `fail-rate`, `mean-value` |
- [WaferCorrelationMetric](https://chart.syidax.com/ko/docs/types/WaferCorrelationMetric.md) — 타입 정의
### passBin
JavaScript 프로퍼티로 전달합니다. 타입: number | string.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `passBin` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `number \| string` |
| 기본값 | `1` |
### labelA
Labels for the subtitle (default A/B).
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `labelA` |
| HTML attribute | `label-a` |
| 타입 | `string` |
| 기본값 | `'A'` |
### labelB
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `labelB` |
| HTML attribute | `label-b` |
| 타입 | `string` |
| 기본값 | `'B'` |
### diameter
Wafer geometry — forwarded to the underlying map.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `diameter` |
| HTML attribute | `diameter` |
| 타입 | `number` |
| 기본값 | `300` |
### edgeExclusion
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `edgeExclusion` |
| HTML attribute | `edge-exclusion` |
| 타입 | `number` |
| 기본값 | `3` |
### indicator
허용값: none, flat, notch. 기본값: 'notch'.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `indicator` |
| HTML attribute | `indicator` |
| 타입 | `WaferIndicator` |
| 기본값 | `'notch'` |
| 허용값 | `none`, `flat`, `notch` |
- [WaferIndicator](https://chart.syidax.com/ko/docs/types/WaferIndicator.md) — 타입 정의
### orientation
허용값: left, right, down, up. 기본값: 'down'.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `orientation` |
| HTML attribute | `orientation` |
| 타입 | `WaferOrientation` |
| 기본값 | `'down'` |
| 허용값 | `left`, `right`, `down`, `up` |
- [WaferOrientation](https://chart.syidax.com/ko/docs/types/WaferOrientation.md) — 타입 정의
### dieWidth
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `dieWidth` |
| HTML attribute | `die-width` |
| 타입 | `number` |
| 기본값 | `10` |
### dieHeight
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `dieHeight` |
| HTML attribute | `die-height` |
| 타입 | `number` |
| 기본값 | `10` |
### scribeX
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `scribeX` |
| HTML attribute | `scribe-x` |
| 타입 | `number` |
| 기본값 | `0.2` |
### scribeY
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `scribeY` |
| HTML attribute | `scribe-y` |
| 타입 | `number` |
| 기본값 | `0.2` |
### showPartial
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `showPartial` |
| HTML attribute | `show-partial` |
| 타입 | `boolean` |
| 기본값 | `true` |
### colorAxis
Value-axis override; default symmetric rdbu centred on 0.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `colorAxis` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `WaferValueAxisInput` |
| 기본값 | `undefined` |
| 타입에 포함된 리터럴 | `auto` |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
- [WaferValueAxisInput](https://chart.syidax.com/ko/docs/types/WaferValueAxisInput.md) — 타입 정의
### showStats
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `showStats` |
| HTML attribute | `show-stats` |
| 타입 | `boolean` |
| 기본값 | `true` |
### chartTitle
차트 내부 제목입니다. 데이터의 단위와 의미를 함께 설명하세요.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `chartTitle` |
| HTML attribute | `chart-title` |
| 타입 | `string` |
| 기본값 | `undefined` |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
### chartSubtitle
차트 내부 부제목입니다.
| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `chartSubtitle` |
| HTML attribute | `chart-subtitle` |
| 타입 | `string` |
| 기본값 | `undefined` |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
## Events
### rendered
차트 그리기가 완료되면 렌더링 결과를 detail로 전달합니다.
이벤트 이름: `rendered`. 대소문자를 구분합니다. payload는 `CustomEvent`의 `detail`에서 읽습니다.
```javascript
chart.addEventListener('rendered', event => {
console.log(event.detail); // WaferMapRenderResult & { tier: 'standard' }
});
```
- [WaferMapRenderResult](https://chart.syidax.com/ko/docs/types/WaferMapRenderResult.md) — 타입 정의
## Methods
### getCorrelationSummary
Delta/correlation summary (r, mean Δ, worse/better cells).
```typescript
getCorrelationSummary(): Promise>
```
반환 타입: `Promise>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- [WaferCorrelationResult](https://chart.syidax.com/ko/docs/types/WaferCorrelationResult.md) — 타입 정의