1. C3.js란?

D3.js 기반의 차트 라이브러리 이다. D3.js가 차트만을 위한 라이브러리가 아니어서 차트를 그리기 위해 사용하는데는 간단하지 않은 반면 C3.js는 차트를 그리기 위한 라이브러리인 만큼 데이터 입력부분만 잘 처리하면 사용하는 법이 다소 간편하다.

2. C3.js 사용법

설치

npm install c3

ex) chart 관련 컴포넌트 (막대 그래프)

import React, { useEffect } from 'react';
import c3 from 'c3';
import { useSelector } from 'react-redux';
const Chart = () => {
  const dayPomo = useSelector(state => state.pomo.value.dayPomo); 
  // 그래프로 그려낼 redux로 가져온 데이터

  const totalPomo = dayPomo.slice(dayPomo.length - 5, dayPomo.length);
  
  useEffect(() => {
    c3.generate({
      bindto: '#chart', // id를 chart로 설정
      data: {
        x: 'x', // x축
        columns: [
          ['x', '4일전', '3일전', '2일전', '어제', '오늘'], // x축
          ['뽀모', ...totalPomo], // 들어가는 데이터 이름 , y축 수치
        ],
        type: 'bar', // 막대형 그래프
        colors: {
          뽀모: 'tomato', // 막대 색깔 tomato
        },
      },
      axis: {
        x: {
          type: 'category',
        },
      },
    });
  }, [dayPomo]);
  return <div id="chart"></div>; // id를 chart로 설정해서 불러낸다.
};

export default Chart;