vue3 sfc vue-chartjs

https://www.chartjs.org/
https://vue-chartjs.org/

"chart.js": "3.9.1",
"vue": "3.2.36",
"vue-chartjs": "4.1.2"

<script setup>
import {Bar, Pie} from 'vue-chartjs'
import {Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ArcElement} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ArcElement);

const chartOptions1 = {responsive: true};
const chartData1 = {
    labels: ['1月', '2月', '3月'],
    datasets: [
        {
            label: '2021年',
            backgroundColor: ['#f7fcf0', '#e0f3db', '#ccebc5'],
            data: [30, 20, 12]
        },
        {
            label: '2022年',
            backgroundColor: ['#f7fcf0', '#e0f3db', '#ccebc5'],
            data: [10, 25, 22]
        }

    ]
};
const chartId1 = 'bar-chart';

const chartOptions2 = {responsive: true, maintainAspectRatio: false}
const chartData2 = {
    labels: ['その1', 'その2', 'その3', 'その4'],
    datasets: [
        {
            backgroundColor: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4'],
            data: [40, 20, 80, 10]
        }
    ]
}
const chartId2 = 'pie-chart';

const width = 400;
const height = 400;
</script>

<template>
    <Bar
        :chart-options="chartOptions1"
        :chart-data="chartData1"
        :chart-id="chartId1"
        :width="width"
        :height="height"
    />
    <hr>
    <Pie
        :chart-options="chartOptions2"
        :chart-data="chartData2"
        :chart-id="chartId2"
        :width="width"
        :height="height"
    />
</template>