# Svelte

> Use 82chart as a Svelte component.

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

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

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

  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [{ name: 'Sales', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  };
</script>

<Chart82 type="bar" {data} options={{ title: 'Monthly sales', prefix: '₩' }} />
```

- A Svelte 5 component: `<Chart82 {type} {data} {options} {theme} onclick onready bind:chart />`.
- There is also a `use:chart82` action for any element; it takes one options object.
- `data` redraws when you pass a new object.

## As an action

```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>
```