# 설치와 첫 차트

패키지를 연결하고 필요한 차트 요소를 등록한 뒤 데이터를 전달합니다.

Canonical: https://chart.syidax.com/ko/docs/getting-started/

<a id="install"></a>

## 패키지 설치

앱 프로젝트에서 필요한 기능에 따라 Community 또는 Pro를 공개 npm으로 설치합니다.

```sh
npm install @syidax/advanced@latest
```

```sh
npm install @syidax/advanced-pro@latest
```

Pro 기능을 사용하는 앱은 @syidax/advanced-pro를 설치하고 CSS·컴포넌트·라이선스 import를 모두 이 패키지로 통일합니다.

- [설치 파일과 HTML 실행 예제](https://chart.syidax.com/charts/installation) — 공개 npm에서 Community 또는 Pro 설치

<a id="register"></a>

## 요소 등록과 데이터 연결

아래 코드는 번들러가 있는 앱의 진입 파일과 HTML입니다. 필요한 컴포넌트를 직접 등록합니다. 배열을 문자열 attribute로 넣지 말고 요소의 프로퍼티에 할당하세요.

```javascript
import '@syidax/advanced/css/chart';
import { defineCustomElement } from '@syidax/advanced/components/sy-line-chart.js';

defineCustomElement();
await customElements.whenDefined('sy-line-chart');
const chart = document.querySelector('#vis');
chart.series = [{ name: '매출', values: [12, 18, 15, 24] }];
chart.xAxis = { kind: 'category', categories: ['1월', '2월', '3월', '4월'] };
chart.legend = true;
```

```html
<div id="chart-container">
  <sy-line-chart id="vis" height="360" aria-label="월별 매출"></sy-line-chart>
</div>
```

<a id="resize"></a>

## 크기와 해제

컨테이너 크기를 관찰하여 width를 갱신합니다. SPA 화면이 해제되면 observer와 앱에서 등록한 이벤트 리스너를 정리하세요.

```javascript
const container = document.querySelector('#chart-container');
const observer = new ResizeObserver(([entry]) => {
  chart.width = Math.max(160, Math.floor(entry.contentRect.width));
});
observer.observe(container);

function dispose() {
  observer.disconnect();
}
```

<a id="pro"></a>

## Pro 라이선스

Pro 차트·렌더러·브랜딩 기능은 해당 권한이 있는 인증서를 등록한 뒤 사용합니다. 발급받은 서명된 인증서만 앱에 전달하며 서명용 비밀 키를 포함하지 않습니다.

```javascript
import { registerLicense } from '@syidax/advanced-pro/license';

const response = await fetch('/licenses/syidax.json');
if (!response.ok) throw new Error('라이선스를 불러오지 못했습니다.');
const result = await registerLicense(await response.json());
if (!result.ok) throw new Error('라이선스 등록에 실패했습니다.');
// 등록이 완료된 뒤 Pro 차트를 연결합니다.
```