# 웹 컴포넌트 <chart-82>

> 프레임워크 없이 HTML 태그 하나로.

Source: https://82chart.com/docs/web-component/

CDN 스크립트(`82chart.min.js`, `82chart.esm.js`)는 `<chart-82>` 를 자동으로 등록합니다. npm 패키지에서는 `defineChartElement()` 를 한 번 부르세요. 서버 템플릿(PHP, JSP, Django)에서 JSON 만 찍어 주면 됩니다.

```html
<chart-82
  type="bar"
  title="월별 매출"
  unit="원"
  height="280"
  data='{"labels":["1월","2월","3월"],"series":[{"name":"매출","data":[32000000,41000000,38500000]}]}'
></chart-82>
```

```js
import { defineChartElement } from '@82chart/core';
import '@82chart/core/styles.css';
defineChartElement();            // <chart-82>
// defineChartElement('my-chart'); // 다른 태그 이름으로

const el = document.querySelector('chart-82');
el.options = { zoom: true, annotations: { y: [{ value: 40000000, label: '목표' }] } }; // 객체로 넘기는 옵션
el.chart.download('png');        // 안쪽 차트 인스턴스
```

| 속성 | 설명 |
| --- | --- |
| `type`, `theme`, `skin` | 문자열 그대로 |
| `data` | JSON 문자열 (`{"labels": …, "series": …}`) |
| `options` | 나머지 옵션의 JSON 문자열. 함수가 필요한 옵션은 `el.options` 속성으로 |
| `height` | 숫자 또는 `auto` |
| `title`, `subtitle`, `eyebrow`, `footnote`, `unit` | 카드 머리글과 단위 |
| `value`, `delta` | 숫자로 읽을 수 있으면 숫자로 |

속성을 바꾸면 차트가 바로 다시 그려지고, 요소를 문서에서 빼면 차트도 정리됩니다.