Docs › Frameworks and server

Svelte

Use 82chart as a Svelte component.

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

<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

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