JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<span>資料來源:政府資料開放平臺</span>
<canvas id="line-chart" width="400" height="400"></canvas>
<canvas id="bar-chart" width="400" height="400"></canvas>
<canvas id="pie-chart" width="400" height="400"></canvas>

CSS

span {    
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: #000;
  text-align: right;
  margin-bottom: 20px;
}

JavaScript

// 出生率
const lineChart = document.querySelector("#line-chart");

const year = [
  "93年", "94年", "95年", "96年", "97年", "98年", "99年", "100年", "101年", "102年", "103年", "104年", "105年", "106年", "107年", "108年", "109年", "110年",
];
const born = [
  "37.83", "36.25", "35.39", "35.63", "34.38", "33.3", "28", "32.01", "35.92", "29.11", "31.08", "39.73", "41.28", "40.3", "38.57", "38.42", "35.99", "35.49"
];

const bornLineChart = new Chart(lineChart, {
  type: 'line',
  data: {
    labels: year,
    datasets: [{
      label: '出生率',
      data: born,
      borderColor: 'rgba(103, 58, 183, 0.6)',
      fill: false,
      pointBackgroundColor: 'rgba(103, 58, 183, 1)',
      pointRadius: 4,
      pointHoverRadius: 8,
    }],
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        },
        gridLines: {
          display: false,
        }
      }],
    },
    layout: {
      padding: {
        left: 50,
        right: 50,
        top: 0,
        bottom: 50,
      }
    },
    title: {
      display: true,
      text: '桃園市一般生育率',
      fontSize: 25,
    },
    tooltips: {
      titleFontSize: 17,
      bodyFontSize: 15,
      xAlign: 'center',
      yAlign: 'top',
    },
  },
});

// 確診人數
const barChart = document.querySelector("#bar-chart");

const country = ['美國', '日本', '台灣', '德國', '俄羅斯', '韓國', '巴西'];
const totalNum = ['103124043', '33113074', '9937216', '38002114', '21855727', '30433895', '36987682'];

const diagnosedBarChart = new Chart(barChart, {
  type: 'bar',
  data: {
    labels: country,
    datasets: [{
      label: '總確診數',
      data: totalNum,
      backgroundColor: 'rgba(244, 67, 54, 0.3)',
      hoverBackgroundColor: 'rgba(244, 67, 54, 0.7)',
    }],
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
    layout: {
      padding: {
        left: 50,
        right: 50,
        top: 0,
        bottom: 50,
      }
    },
    title: {
      display: true,
     ...