Nuxt3とChart.jsで積み上げ棒グラフのプログラムに挑戦します！

<template>
  <div>
    <Bar :data="chartData" :options="chartOptions" />
  </div>
</template>

<script setup lang="ts">
  import { Bar } from 'vue-chartjs';
  import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js';
  import annotationPlugin from 'chartjs-plugin-annotation';

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

  const chartData = ref<any>({
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [
      {
        label: 'Dataset 1',
        data: [10, 20, 30, 40, 50, 60],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1,
      },
      {
        label: 'Dataset 2',
        data: [15, 25, 35, 45, 55, 65],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1,
      },
    ],
  });

  const chartOptions = ref<any>({
    responsive: true,
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true,
      },
    },
    plugins: {
      tooltip: {
        callbacks: {
          footer: (tooltipItems: any) => {
            const label = tooltipItems[0].label;
            const datasets = chartData.value.datasets;
            let sum = 0;

            datasets.forEach((dataset: any) => {
              const dataIndex = chartData.value.labels.indexOf(label);
              sum += dataset.data[dataIndex];
            });

            return `Total: ${sum}`;
          },
        },
      },
      annotation: {
        annotations: {
          thresholdLine: {
            type: 'line',
            yMin: 50, // 閾値の値
            yMax: 50,
            borderColor: 'red',
            borderWidth: 2,
            label: {
              content: 'Threshold',
              enabled: true,
              position: 'center',
            },
          },
        },
      },
    },
  });
</script>

<template>
  <div>
    <StackedBarChart />
  </div>
</template>

<script setup lang="ts">
  import StackedBarChart from '~/components/StackedBarChart.vue';
</script>

export default defineNuxtConfig({
  build: {
    transpile: ['vue-chartjs', 'chart.js'],
  },
});