vuechart3 chart.js 棒グラフ

棒グラフ。

```hoge.vue
<template>
    <div>
        <div>
            <BarChart :chartData="barData" :options="options" />
        </div>
    </div>
</template>

<script>

    import { Chart, registerables } from "chart.js";
    import ChartDataLabels from 'chartjs-plugin-datalabels';
    import { PieChart, LineChart,BarChart } from "vue-chart-3";

    Chart.register(
        {
            id: 'customPluginName',
            beforeDraw: function(c){
                var ctx = c.ctx;
                // ctx.fillStyle = "#ffffff";
                ctx.fillStyle = "#ffffff";
                ctx.fillRect(0, 0, ctx.canvas.width,ctx.canvas.height);
                ctx.save();
            },
        }
    );

    Chart.register(ChartDataLabels);
    Chart.defaults.set('plugins.datalabels', {
        // color: '#FFFFFF',
        color: '#000',

        font: {
            weight: 'bold',
            size: 20,
        },
        formatter: (value, ctx) => {
            let label = ctx.chart.data.labels[ctx.dataIndex];
            return label + '\n' + value + '%';
        },

    });

    Chart.register(...registerables);

    export default {

        components: {
            BarChart,
        },

        computed: {
            barData() {
                return {

                    labels:  ["月", "火", "水", "木", "金", "土", "日"],
                    datasets: [{
                        label: '金額',
                        data: [65, 59, 80, 81, 56, 55, 40],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(255, 159, 64, 0.2)',
                            'rgba(255, 205, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(201, 203, 207, 0.2)'
                        ],
                        borderColor: [
                            'rgb(255, 99, 132)',
                            'rgb(255, 159, 64)',
                            'rgb(255, 205, 86)',
                            'rgb(75, 192, 192)',
                            'rgb(54, 162, 235)',
                            'rgb(153, 102, 255)',
                            'rgb(201, 203, 207)'
                        ],
                        borderWidth: 1,
                    }],

                };
            },
        },

        data(){
            return {
                options:{
                    scales: {

                        y: {
                            // 最小値・最大値
                            min: 0,
                            max: 100,

                            // タイトル
                            title: {
                                display: true,
                                text: 'テスト点数',
                                color: '#FF4500',
                                font: {
                                    size: 20
                                }
                            },
                            ticks: {
                                // 目盛刻み

                                stepSize: 10
                            }
                        },
                        // x軸
                        x: {
                            title: {
                                display: true,
                                text: '学期',
                                color: 'rgb(255,69,0)',
                                font: {
                                    size: 20
                                }
                            }
                        }
                    },
                    responsive: true,
                    plugins: {
                        legend: {
                            position: false//タイトルを無しにする
                        },
                        title: {
                            display: true,
                            text: 'これがグラフのタイトル',
                        },
                    },
                }
            }
        },

    }

</script>


```