React에서 Chartjs 도넛 그래프 적용, 타입스크립트 에러 처리

Chartjs 도넛 적용, 타입 지정 (ft.React)

React에서 Chartjs 적용, 오류 해결과 타입 지정에 대한 정리글 입니다.

Chartjs 설치

chartjs와 react chartjs를 같이 설치합니다.
yarn add react-chartjs-2 chart.js

원하는 차트 모양 선택, 적용

Chartjs에서 공식문서에서 원하는 도형 선택, 차트 데이터와 옵션을 설정합니다. 저의 경우 옵션은 따로 필요하지 않아 데이터만 설정했습니다.

// DoughnutGraph 컴포넌트

1️⃣interface DoughnutProps {
  ingredient: string;
  amount: number;
}

const DoughnutGraph: FC<DoughnutProps> = ({ ingredient, amount }) => {
  2️⃣const data = {
    maintainAspectRatio: false,
    responsive: false,
    datasets: [
      {
        // data의 개수를 배열을 통해 설정. 색도 배열의 인덱스로 구분
        data: [amount, 50 - amount],
        backgroundColor: ["rgba(255, 139, 120, 1)", "rgba(245, 245, 245, 1)"],
        borderRadius: 10, // 그래프 끝 radius 설정
        cutout: "75%",    // 도넛 안쪽 원의 크기 설정
      },
    ],
  };

  return (
    <GraphContainer>
      3️⃣<Doughnut type data={data} />
      4️⃣<TextContainer>
        <p>{amount}</p>
        <p>{ingredient}</p>
      </TextContainer>
    </GraphContainer>
  );
};

1. 상위 컴포넌트에서 받아온 데이터의 값들의 타입입니다.
2. Chartjs에 필요한 데이터를 설정합니다. datasets 안에 속성들을 이용해 표시합니다.
3. 원하는 도형안에 data를 전달합니다. 필요한 경우 option도 전달합니다. 타입스크립트에서 실행하기 위해 type을 함께 전달합니다.
4. 도넛 안에 텍스트들 입니다.

도넛 안에 텍스트 넣기

위의 4번에 해당하는 컴포넌트의 스타일입니다. 라이브러리가 있지만 적용하기가 까다로워 css로 처리했습니다. 텍스트의 글자, 크기에 맞게 조절했습니다.

export const GraphContainer = styled.article`
  position: relative;
`;

export const TextContainer = styled.div`
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);

  p:first-child {
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.5px;

    color: #000000;
  }

  p:last-child {
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.5px;

    color: #000000;
  }
`;

도넛 그래프 크기 계속해서 커지는 현상

도넛 크기를 설정하지 않고 도넛 그래프를 렌더링 하면 무한히 커지는 현상이 있습니다. 이를 해결하기 위해 상위 DOM의 max-width값을 선언해 원하는 크기의 도넛으로 만들 수 있습니다.
Chartjs의 차트들은 canvas 내에서 그려지기 때문에 canvas의 max-width를 설정했습니다.

    // Doughnut을 감싸고 있는 DoughnutContainer 컴포넌트
    // currentMeal은 외부에서 가져온 데이터입니다.

    return(
        <DoughnutContainer>
            <DoughnutGraph
              ingredient="단백질"
              amount={currentMeal.protein}
            />
        </DoughnutContainer>
       <DoughnutContainer>
                <DoughnutGraph ingredient="지방" amount={currentMeal.fat} />
        </DoughnutContainer>
        <DoughnutContainer>
            <DoughnutGraph
              ingredient="탄수화물"
              amount={currentMeal.carb}
             />
        </DoughnutContainer>
    )

    // 컴포넌트 스타일링
    export const DoughnutContainer = styled.section`
        width: 100%;
        canvas {
           1️⃣max-width: 100%;
        }
    `

1. 도넛 그래프를 감싸고 있는 DoughnutContainer의 canvas 태그 max-width값 지정