[React] Chart.js2

박영준·2021년 1월 3일
0

Chart.js

설치 방법

먼저 관련 라이브러리를 설치한다.

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}
            />
    );
};
profile
React, React-Native Developer

0개의 댓글