Install vue-chart.js
xxxxxxxxxx
npm i vue-chartjs
main.js
xxxxxxxxxx
import { createApp } from 'vue'
import App from './App.vue'
import { Chart, registerables } from 'chart.js';
Chart.register(registerables);
createApp(App).mount('#app')
App.vue
xxxxxxxxxx
<template>
<canvas id="myChart"></canvas>
</template>
<script setup>
import { onMounted } from "@vue/runtime-core";
import {Chart} from "chart.js"
onMounted(() => {
let myChart = new Chart("myChart",
{
type:"bar",
data:{
labels:["label","label2"],
datasets:[{
type:"bar",
backgroundColor:["blue","red"],
data:[5,3]
},
//Second Bar (Optional)
{
type:"bar",
data:[4,1],
backgroundColor:["green","yellow"]
}]
},
options:{
responsive:false,
maintainAspectRatio:false,
plugins:{
legend:{
display:false
},
title:{
display:false
}
}
}
});
//Udate Chart
myChart.data.datasets[0].data[0] = 10;
myChart.update();
})
</script>