JSFiddle - React, Tailwind, and code Playground

HTML

<h1 style="text-align: center;">JavaScript 系列四：第3課 ── Chart.js 套件</h1>

<canvas id="lineDeath"></canvas>
<hr>
<canvas id="barMovie"></canvas>
<hr>
<canvas id="pieLaborAge"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

CSS

* {
  padding: 0;
  margin: 0;
}

JavaScript

const line = document.querySelector("#lineDeath");
const deathYear = ["108年", "109年", "110年", "111年", "112年"];
const deathPopulation = [10826, 17212, 18623, 20783, 20357];

const bar = document.querySelector("#barMovie");
const movieMonth = [
  "1月",
  "2月",
  "3月",
  "4月",
  "5月",
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "12月"
];
const movieWatchter = [
  856786,
  815678,
  664113,
  783068,
  615038,
  653871,
  1218164,
  897774,
  493122,
  532203,
  414825,
  637700
];

const pie = document.querySelector("#pieLaborAge");
const laborAge = [
  "未滿 15 歲",
  "15 - 19歲",
  "20 - 24歲",
  "25 - 29歲",
  "30 - 34歲",
  "35 - 39歲",
  "40 - 44歲",
  "45 - 49歲",
  "50 歲以上"
];
const laborCount = [0, 46, 324, 1674, 3811, 2700, 765, 80, 13];

new Chart(line, {
  type: "line",
  data: {
    labels: deathYear,
    datasets: [
      {
        label: "死亡人口",
        data: deathPopulation,
        fill: false,
        borderColor: "#42b983",
        backgroundColor: "#42b983",
        pointRadius: 5,
        pointBorderColor: "#426e52",
        pointBackgroundColor: "#426e52",
        pointHoverRadius: 10
      }
    ]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: "108 - 112年台北市死亡人口",
        align: "center",
        color: "#000",
        font: {
          size: 26,
          weight: 900
        },
        padding: {
          top: 20,
          bottom: 20
        }
      },
      legend: {
        display: true,
        position: "top",
        align: "center"
      },
      tooltip: {
        titleFont: {
          size: 18
        },
        bodyFont: {
          size: 16
        },
        xAlign: "center",
        yAlign: "top"
      },
      subtitle: {
        display: true,
        text:
          "資料來源： 台北市政府資料開放平台（臺北市死亡人口數按年齡分。2024-01-31）",
        align: "end"
      }
    },
    interaction: {
      mode: "nearest",
      intersect: false
    },
    scales: {
      y: {
        beginAtZero: true
      }
    }
 ...