chart.js활용하여 chart 만들기

npm install  시   react-chartjs-2와 chart.js를 같이 인스톨해줘야한다

//Contect.js
import React,{useState,useEffect} from 'react'
import axios from 'axios';
import { Bar } from 'react-chartjs-2';


const Contents = () => {
  const [confirmedData,setconfimedData] = useState({})


  useEffect(()=>{
    const fetchEvents = async () =>{
      const res = await axios.get("https://api.covid19api.com/total/dayone/country/kr")
      console.log(res)
      // makeData(res.data)
    }

    fetchEvents();
  })

  return (
        <section className="content">
                  <h2>국내 코로나 현황</h2>
                  <Bar data={{
                    labels:['a', 'b', 'c', 'd', 'e', 'f'],
                    datasets:[
                      {
                        label:"#ofvotes",
                        data:[10,20,10,11,23,22],
                        backgroundColor: [
                          'rgba(255, 99, 132, 0.2)',
                          'rgba(54, 162, 235, 0.2)',
                          'rgba(255, 206, 86, 0.2)',
                          'rgba(75, 192, 192, 0.2)',
                          'rgba(153, 102, 255, 0.2)',
                          'rgba(255, 159, 64, 0.2)'
                      ],
                      borderColor: [
                          'rgba(255, 99, 132, 1)',
                          'rgba(54, 162, 235, 1)',
                          'rgba(255, 206, 86, 1)',
                          'rgba(75, 192, 192, 1)',
                          'rgba(153, 102, 255, 1)',
                          'rgba(255, 159, 64, 1)'
                      ],
                      borderWidth: 1
                      },
                      {
                        label:"quantity",
                        data:[20,30,20,20,20,30],
                        backgroundColor:[
                          'rgba(0, 0, 0, 0.2)',
                          'rgba(0, 0, 0, 0.2)',
                          'rgba(0, 0, 0, 0.2)',
                          'rgba(0, 0, 0, 0.2)',
                          'rgba(0, 0, 0, 0.2)',
                          'rgba(0, 0, 0, 0.2)',
                        ],
                      }
                    ],
                  }}
                  height={400} width={600} />
      </section>
  )
}

export default Contents;