2023-05-05 10:23:06 +02:00

44 lines
847 B
Vue

<template>
<div>
<canvas ref="chartCanvas"></canvas>
</div>
</template>
<script>
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
BarElement,
CategoryScale,
LinearScale
} from 'chart.js'
import { Bar } from 'vue-chartjs'
ChartJS.register(Title, Tooltip,Legend, BarElement, CategoryScale, LinearScale)
export default {
props: ['chartData'],
mounted(){
this.renderChart();
},
methods: {
renderChart() {
const ctx = this.$refs.chartCanvas.getContext('2d');
new ChartJS(ctx, {
type: 'bar',
data: this.chartData,
options: {
responsive: true,
maintainAspectRatio: true
},
});
},
},
};
</script>
<style scoped>
</style>