Docs › Frameworks and server

Vue

Use 82chart as a Vue component.

npm i @82chart/core @82chart/vue

<script setup>
import { Chart82 } from '@82chart/vue';
import '@82chart/core/styles.css';

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

<template>
  <Chart82 type="bar" :data="data" :options="options" @click="(p) => console.log(p)" />
</template>

<Chart82 :type :data :options :theme @click @ready /> (Vue 3).
data is watched deeply, so changing values inside the arrays redraws.
Take the chart instance from @ready to call methods such as toPNG().
In Nuxt, wrap it in <ClientOnly>.