# 시작하기

> 5분 안에 내 화면에 첫 차트를 그리는 방법.

Source: https://82chart.com/docs/getting-started/

82chart는 의존성이 없는 SVG 차트 부품입니다. 빌드 도구가 없는 PHP·JSP 화면이라면 CDN 두 줄, npm을 쓰는 프로젝트라면 패키지 하나면 됩니다. 라이선스 키, 워터마크, 가입, 결제가 없습니다.

```js
createChart('#chart', {
  type: 'bar',
  title: '월별 매출',
  unit: '원',
  data: {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
    series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  },
});
```

축에는 **3,200만·5,200만**처럼 만·억 단위가, 툴팁에는 **32,000,000원**처럼 정확한 숫자가 나옵니다. 문서 언어(`<html lang>`)가 한국어면 기본이 만·억입니다.

## CDN으로 붙이기

가장 빠른 방법입니다. 스크립트가 전역 `Chart82` 를 만들고 `<chart-82>` 태그도 등록합니다.

```html
<link rel="stylesheet" href="https://82chart.com/cdn/v0.3.0/82chart.css">
<script src="https://82chart.com/cdn/v0.3.0/82chart.min.js"></script>

<div id="chart"></div>
<script>
  Chart82.createChart('#chart', {
    type: 'bar',
    title: '월별 매출',
    unit: '원',
    data: {
      labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
      series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
    },
  });
</script>
```

## npm으로 설치하기

```sh
npm i @82chart/core
```

```js
import { createChart } from '@82chart/core';
import '@82chart/core/styles.css';

const chart = createChart('#chart', {
  type: 'bar',
  title: '월별 매출',
  unit: '원',
  data: {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
    series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  },
});

chart.on('click', (point) => console.log(point.x, point.y));
```

`createChart` 의 첫 인자는 요소나 선택자입니다. 그 요소 안의 내용은 차트로 바뀝니다. 너비는 부모 폭을 따라가고, 창 크기가 바뀌면 알아서 다시 그립니다.

## 데이터 바꾸기

```js
chart.update({
  labels: ['7월', '8월'],
  series: [{ name: '매출', data: [64000000, 70500000] }],
});
chart.setOptions({ type: 'line', smooth: true }); // 옵션 일부만 바꾸기
chart.destroy();                                  // 화면에서 없앨 때
```

## 다음 단계

- [데이터 형식](https://82chart.com/docs/data-format/): 날짜 축, 빈 값, 점 목록
- [숫자와 날짜](https://82chart.com/docs/numbers-dates/): 만·억, "단위: 백만원", 날짜 모양
- [막대](https://82chart.com/docs/bar/) · [선](https://82chart.com/docs/line/) · [파이·도넛](https://82chart.com/docs/pie-donut/) · [KPI 카드](https://82chart.com/docs/sparkline-kpi/)
- [React](https://82chart.com/docs/react/) · [Vue](https://82chart.com/docs/vue/) · [Svelte](https://82chart.com/docs/svelte/) · [Angular](https://82chart.com/docs/angular/)