Display multiple charts using Chart.js library

HTML

<span>資料來源：政府資料開放平臺</span>
<h2>條形圖 (line  Chart)</h2>
<canvas id="myline" width="200" height="200" ></canvas>
<h2> Bar Chart圖</h2>
<canvas id="myBar" width="200" height="200"></canvas>
<h2>Pie Chart圖</h2>
<canvas id="myPie" width="200" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

CSS

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

JavaScript

let line1 = document.querySelector('#myline').getContext('2d');
let chart = new Chart(line1, {
  type:'line',
  data:{
    labels:['辛亥路與基隆路口', '基隆路與羅斯福路口', '中正路與文昌路口', '健康路與塔悠路口', '承德路與基河路口', '民族西路與環河北路口'
            , '民權西路與承德路口', '北安路與明水路口&松河街與塔悠路口', '和平東路與基隆路口', '仁愛路與敦化南路口'],
    datasets:[{
      label:'Sales',
      data:[668,558, 511, 451, 348, 338, 313, 302, 298, 295],
      fill:false,
      backgroundColor:'rgba(75, 192, 192, 0.2)',
      borderColor:'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  },
  options:{

    scales:{
      y:{
        beginAtZero:true
      }
    },

  }
});

let line2 = document.querySelector('#myBar').getContext('2d');
let barChartData = new Chart(line2, {
  type: 'bar',
  data: {
    labels: ['全年應篩檢人數', '實際篩檢人數', '篩檢陽性個案數', '確診人數合計', '確診人數_正常', '確診人數_異常', '尚未確診人數'],
    datasets: [{
      label: '人數',
      data: ['11867', '11776', 144, 131, 80, 51, 0],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      hoverBackgroundColor: 'rgba(100, 25, 255, 0.6)',
    }],
  },
  options: {
    scales: {
      y: {
        beginAtZero:true

      }
    },

  },
});

let line3 = document.querySelector('#myPie').getContext('2d');
var pieChartData = new Chart(line3, {
  type: 'pie',
  data: {
    labels: ["青壯年", "老年人口", "幼年人口"],
    datasets: [{
      data: ['67.10','19.97','12.93'],
      backgroundColor: [
        'rgba(255, 0, 0, 0.4)',
        'rgba(53, 202, 107, 0.4)',
        'rgba(55, 128, 186, 0.4)',
      ],
      hoverBackgroundColor: [
        'rgba(255, 0, 0, 0.5)',
        'rgba(53, 202, 107, 0.5)',
        'rgba(55, 128, 186, 0.5)',
      ],
      borderWidth: 2,
    }],
  },
  options: {
    layout: {
      padding: {
        left: 50,
        right: 50,
        top: 0,
        bottom: 50,
      }
    },
    title: {
      display: true,
      text: '110年度 台北市人口佔比',
      fontSize: 25,
    },
    tooltips: {
      bodyFontSize: 20,
      caretSize: 0,
      cornerRadius: 0,	
    },
    animation: {
     ...