[React] chartjs / chart.js / react 차트 / react chart

 

 

 

 

 

 

Chart.js

 

이번에 신규 프로젝트를 진행하게되어 시안을 받았다.

매출이나 현황 등 주로 대시보드에서 자주 쓰이는 차트를 사용 해보려고 한다.

아! 여기에서는 함수형 컴포넌트를 사용하고 있다 : )

 

 

디자이너분께 전달받은 이미지 시안

Install

$ npm install chart.js --save

Import

import Chart from 'chart.js/auto';

 

How to Use

function ??? () {

const canvasDom = useRef(null);

    // Dependency array 에 props 추가하고 return에 chart.destory() 추가 예정
    useEffect(() => {
        const ctx = canvasDom.current.getContext("2d");
        new Chart(ctx, {
            type: "bar",
            data: {
                labels: ['월', '화', '수', '목', '금', '토', '일' ], // x축 Data
                datasets: [
                    {
                        data: [750, 640, 240, 200, 160, 400, 600], // y축 Data
                        borderWidth : 1,			//Bar에 border width 값
                        barPercentage : 0.7,		//Bar의 두께

                    },
                ],
            },
            options: {
                backgroundColor : "#9ac6ff",		//Bar의 색상
            }
        });
    }, []);

	return (
    	<div>
       		<div className="chart-container">
       	 		<canvas ref={canvasDom} height="180"></canvas>
        	</div>
        </div>
    );
    
}

 

Result

좌측 : 시안 / 우측 : 만든거

마무리

시안을 이미지 파일로 받았기 때문에, 디자이너분과 협의하면서 세부적인 조절만 하면 될 듯 하다.

헷갈리시는 분들은 무작정 따라해보시길 추천한다.