# 설정과 데이터 모델

공통 sy-chart와 개별 태그는 진입점이 다르며, 지원하는 속성 이름과 타입도 확인해야 합니다.

Canonical: https://chart.syidax.com/ko/docs/concepts/

<a id="elements"></a>

## 공통 파사드와 직접 태그

sy-chart는 type으로 차트를 선택하는 공통 진입점입니다. sy-line-chart 같은 직접 태그는 해당 차트의 API를 노출합니다. 파사드의 모든 옵션이 모든 type에서 동작하는 것은 아닙니다. 차트 종류를 정한 다음 개별 차트의 데이터 계약과 공통 옵션의 관련 타입을 함께 확인하세요.

```html
<sy-chart type="line" height="360"></sy-chart>
<sy-line-chart height="360"></sy-line-chart>
```

| 직접 태그 | 직접 프로퍼티 | sy-chart 프로퍼티 |
| --- | --- | --- |
| sy-icicle | direction | icicleDirection |
| sy-dendrogram | direction | dendrogramDirection |
| sy-flow-lines | routePath | flowLinesPath |
| sy-theme-river | offset | themeRiverOffset |

- [공통 설정](https://chart.syidax.com/ko/docs/options.md)
- [직접 태그별 계약](https://chart.syidax.com/ko/docs/components.md)

<a id="attributes"></a>

## Attribute와 property

HTML에는 height="360"처럼 단순한 값을 설정합니다. JavaScript에서는 chart.height = 360처럼 대소문자를 구분하는 프로퍼티 이름을 사용합니다. 객체·배열·TypedArray·함수는 JavaScript 프로퍼티로 전달하세요. 각 옵션 문서에 두 이름과 정확한 타입을 함께 표기합니다.

```javascript
chart.height = 360;
chart.xAxis = { kind: 'category', categories: ['A', 'B'] };
chart.series = [{ name: '수량', values: [12, 18] }];
```

<a id="contracts"></a>

## 타입과 기본값 읽기

undefined는 미설정 상태이며, 0·false·빈 배열과 다릅니다. 타입의 물음표(?)는 선택 필드 또는 선택 인수를 뜻합니다. 기본값은 소스 선언을 그대로 표시하고, 실제 표시 결과는 선택한 차트·테마·입력 데이터에 영향을 받을 수 있습니다. 객체 타입 이름을 누르면 전체 선언과 관련 타입을 확인할 수 있습니다.

<a id="runtime"></a>

## 메서드와 이벤트

요소가 정의된 뒤 공개 메서드를 호출합니다. 메서드는 Promise를 반환하므로 await로 결과를 읽습니다. 이벤트는 addEventListener로 구독하고 CustomEvent.detail을 읽습니다. 이벤트 이름은 대소문자를 구분합니다.

- [메서드 목록](https://chart.syidax.com/ko/docs/methods.md)
- [이벤트 목록](https://chart.syidax.com/ko/docs/events.md)

<a id="export"></a>

## 내보내기와 메뉴

contextmenu로 기본 내보내기 메뉴를 켭니다. contextMenuItems는 기본 항목 뒤에 사용자 항목을 추가합니다. PNG·SVG 같은 이미지 내보내기는 로고 정책을 따르며, CSV 같은 데이터 파일에는 로고를 추가하지 않습니다.

- [contextMenuItems](https://chart.syidax.com/ko/docs/options/contextMenuItems.md)
- [로고 정책](https://chart.syidax.com/ko/docs/branding.md)