# Svelte

> Svelte 컴포넌트로 82chart 쓰기.

Source: https://82chart.com/docs/svelte/

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

```html
<script>
  import { Chart82 } from '@82chart/svelte';
  import '@82chart/core/styles.css';

  const data = {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
    series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  };
</script>

<Chart82 type="bar" {data} options={{ title: '월별 매출', unit: '원' }} />
```

- Svelte 5 컴포넌트: `<Chart82 {type} {data} {options} {theme} onclick onready bind:chart />`.
- 컴포넌트 대신 아무 요소에 붙이는 `use:chart82` 액션도 있습니다. 옵션 객체 하나를 받습니다.
- `data` 는 새 객체를 넘길 때 다시 그립니다.

## 액션으로 쓰기

```html
<script>
  import { chart82 } from '@82chart/svelte';
  let data = $state({ labels: ['A', 'B', 'C'], series: [{ data: [3, 5, 4] }] });
</script>

<div use:chart82={{ type: 'bar', data, onClick: (p) => console.log(p) }}></div>
```