JSFiddle - React, Tailwind, and code Playground

by dfg312546

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="lineChart"></canvas>
<hr>
<canvas id="barChart"></canvas>
<hr>
<canvas id="pieChart"></canvas>

JavaScript

const linechart = document.querySelector('#lineChart')

new Chart(linechart, {
    type: 'line',
    data: {
      labels: ['102年','103年','104年','105年','106年', '107年', '108年', '109年', '110年', '111年'],
      datasets: [{
        label: '0056股利',
        data: [0.85,1,1,1.3,0.95,1.45,1.8,1.6,1.8,2.1],
        borderWidth: 1
      }]
    },
    options: {
    	plugins:{
      	title:{
        display: true,
        text:'元大高股息近十年股利金額',
        font: {
            size: 16
          },
        }
      },
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
  
  //
  
  const barchart = document.querySelector('#barChart')
  
   new Chart(barchart, {
    type: 'bar',
    data: {
      labels: ['21Q1','21Q2','21Q3','21Q4','22Q1','22Q2','22Q3','22Q4','23Q1','23Q2'],
      datasets: [{
        label: '季殖利率',
        data: [0.51,0.53,0.53,0.53,0.66,0.77,0.83,0.94,0.97,0.91],
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
  			borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 0
      }]
    },
    options: {
    	
    plugins: {
      title: {
        display: true,
        text: '元大美債20年季殖利率',
        font: {
          size: 16
        }
      }
    },


      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
  
  //
  
  const piechart = document.querySelector('#pieChart')
  
    new Chart(piechart, {
    type: 'pie',
    data: {
      labels: ['南亞','兆豐金','中華電','富邦金','中信金','聯電','台達電','聯發科','鴻海','台積電'],
      datasets: [{
        label: '持股百分比',
        data: ['1.42','1.48','1.54','1.56','1.57','1.97','2.58','3.55','4.68','47.96'],
        borderWidth: 1
      }]
    },
    options: {
    
    	plugins: {
      
        title: {
          display: true,
          text: '元大0050前十大成分股',
          font: {
            size: 16
          }
        },      
      },
    
      scales: {
        x: {
          display: false
        },
        y: {
          display: false
     ...