React 에서 Chart.js 관련 차트 구현
Front-End/React 2025. 4. 1. 10:181. React 프로젝트있는 경로에서 아래 npm 명령어로 차트 관련 라이브러리 설치
npm install chart.js react-chartjs-2
2. 차트를 생성하기 위해서, 아래 코드처럼 예시 작성
import React from "react";
import { Bar } from "react-chartjs-2";
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from "chart.js";
// Chart.js에 필요한 컴포넌트 등록
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
const BarChart = () => {
const data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: "rgba(75, 192, 192, 0.6)",
},
],
};
const options = {
responsive: true,
plugins: {
legend: { position: "top" },
title: { display: true, text: "Sample Bar Chart" },
},
};
return <Bar data={data} options={options} />;
};
export default BarChart;
3. 위에서 그려준 차트를 렌더링하기위해서, 아래 코드처럼 다른페이지에서 import해서 사용
import React from "react";
import BarChart from "./BarChart";
const App = () => {
return (
<div>
<h1>Chart.js in React</h1>
<BarChart />
</div>
);
};
export default App;
'Front-End > React' 카테고리의 다른 글
| React 시작하기 - 1 (0) | 2020.07.03 |
|---|---|
| React 프로젝트 실행 (0) | 2020.06.01 |
| create react app 설치 (0) | 2020.05.28 |
