🟦 [React] Chart.js 라이브러리 설치 o

2025.03.09 - [리액트] - 🟦 [React] Chart.js 라이브러리 설치 x , cdn 사용

🟦 [React] Chart.js 라이브러리 설치 x , cdn 사용

 

 

✅ 설치 방법

npm install chart.js react-chartjs-2

 

- DashboardLib.jsx

import React from "react";
import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, BarElement, CategoryScale, LinearScale,  Title, Tooltip, Legend } from "chart.js";

ChartJS.register(BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend);

const ChartComponent = () => {
    const chartData = {
      labels: ["1월", "2월", "3월", "4월", "5월", "6월"],
      datasets: [
        {
          label: "월별 판매량",
          data: [65, 95, 30, 20, 50, 67],
          backgroundColor: "rgba(0, 192, 255, 0.8)",
          borderColor: "rgba(0, 192, 255, 1)",
          borderWidth: 2,
        },
      ],
    };
  
    const options = {
      responsive: true,
      plugins: {
        legend: { display: true },
        title: { display: true, text: "월별 판매량" }
      },
    };
  
    return <Bar data={chartData} options={options} />;
  };
  
  const Dashboard = () => {
    return (
      <div>
        <ChartComponent />
      </div>
    );
  };
  
  export default Dashboard;