먼저 관련 라이브러리를 설치한다.
npm install react-chartjs-2 chart.js --save
react-chartjs-2에서는 사용하고자 하는 Chart를 불러오고 렌더링해준다.
예로 Bar Chart를 사용해보자. 모든 chart들은 data, option props를 가진다.
data
chart의 데이터 값
option
chart의 설정 값 ( scale, tooltip, lable, color 등...)
import React from 'react';
import { Bar } from 'react-chartjs-2';
const Graph = () => {
return (
<Bar
data={data}
width={300}
height={200}
options={options}
/>
);
};
export default Graph;
const options = {
legend: {
display: false, // label 숨기기
},
scales: {
yAxes: [{
ticks: {
min: 0, // 스케일에 대한 최솟갓 설정, 0 부터 시작
stepSize: 1, // 스케일에 대한 사용자 고정 정의 값
}
}]
},
maintainAspectRatio: false // false로 설정 시 사용자 정의 크기에 따라 그래프 크기가 결정됨.
}
const Graph = ({ rankArr }) => {
let calculatedArr = [0,0,0,0,0,0,0,0]
rankArr.forEach(item => calculatedArr[item-1]++)
let rankColor = ["#11b288", "#207ac7", "#207ac7", "#207ac7", "#d6d6d6", "#d6d6d6", "#d6d6d6", "#d6d6d6"]
const data = {
labels: ['#1', '#2', '#3', '#4', '#5', '#6', '#7' , '#8'],
datasets: [
{
backgroundColor: rankColor,
borderColor: rankColor,
borderWidth: 1,
hoverBackgroundColor: rankColor,
hoverBorderColor: rankColor,
data: calculatedArr
}
]
};
return (
<Bar
data={data}
width={300}
height={200}
options={options}
/>
);
};