JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<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>

JavaScript

const linectx=document.getElementById('line-chart').getContext("2d");
const barctx=document.getElementById('bar-chart').getContext("2d");
const piectx=document.getElementById('pie-chart').getContext("2d");

// line
const linechart = new Chart(linectx, {
  type: 'line',
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月'],
    datasets: [{
      label: '股價',
      data: ['522.00', '511.00', '533.00', '502.00', '558.00', '576.00', '565.00', '549.00']
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: "台積電2023年股價",
        font: {
          size: 24
        },
        padding: {
          top: 10,
          bottom: 30
        }
      }
    }
  }
})

// bar
const barchart = new Chart(barctx, {
  type: 'bar', 
  data: {
    labels: ['鹽埕', '鼓山', '左營', '楠梓', '三民'],
    datasets: [{
      label: '人數',
      data: ['17', '144', '168', '119', '243']
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: "高雄市各區外籍人口",
        font: {
          size: 24
        },
        padding: {
          top: 10,
          bottom: 10
        }
      }    
    }
  }            
});

//pie
const piechart = new Chart(piectx, {
  type: 'pie',
  data: {
    labels: ['65歲以上', '45~65歲', '25~45歲', '5~25歲', '0~5歲'],
    datasets: [{
      label: '百分比',
      data: ['29', '25', '22', '20', '4']
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: '台灣人口年齡分布',
        font: {
          size: 24
        },
        padding: {
          top: 10,
          bottom: 30
        }
      }
    }
  }
})