https://www.chartjs.org/docs/latest/samples/other-charts/radar.html

프로젝트 진행 중 그래프 사용이 필요한 부분이 있었습니다.
chart.js와 react-chartjs-2를 활용하여 차트를 구성해보았습니다.

6개의 항목을 포함하는 육각 차트가 필요했고, 커스터마이징이 자유로운 라이브러리를 위주로 고민했었습니다.

0. 라이브러리 설치

npm install chart.js react-chartjs-2

1. Chart.js

Chart.js는 HTML5 캔버스를 사용하여 다양한 유형의 차트를 그릴 수 있는 JavaScript 라이브러리입니다. 바 차트, 선 차트, 원형 차트 등 여러 종류의 차트를 지원합니다.

2. react-chartjs-2

JS기반으로 생성된 Chart.js라이브러리를 리액트에서 사용 가능하도록 래핑하는 역할을 하는 라이브러리입니다.

1. 커스터마이징

1. 기본 디자인

설치를 완료해서 컴포넌트로 불러오면 아래와 같은 UI의 radar chart가 디스플레이 됩니다.

하지만 요구되는 UI에서는 백그라운드의 수치, label, point, line들 모두 디스플레이 될 필요가 없었습니다.
무엇보다 백그라운드는 기본으로 제공되는 web형의 수치화 보다 필요한 이미지가 따로 있었기 때문에 여러모로 고민이 많았습니다,,
결론적으로, 백그라운드 web은 이미지로 대체하고, radar chart에 해당 UI들을 모두 없애는 커스터마이징을 시도 했습니다.

2. 기존 옵션들 visibility 없애기

그 결과는 아래와 같습니다.

1. 결과 차트

2. 최종 코드

import { Radar } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend);

interface HexaGraphProps {
  numdata: number[];
}

function HexaGraph({ numdata }: HexaGraphProps) {

  const data = {
    labels: ['색소침착', '모공', '피부건조', '주름', '살처짐', '얼굴형'],
    datasets: [
      {
        data: numdata, //여기에 배열로 데이터가 들어감 [10,20,95,93,23,45] 등으로
        backgroundColor: 'rgba(0, 213, 255, 0.5)',
        borderColor: 'rgba(0, 213, 255, 0)', // 바깥 선 opacity 0으로 disable
        borderWidth: 2,
        pointRadius: 0, // 데이터 포인트의 점 크기 설정 (0으로 설정하여 숨김)
        pointHoverRadius: 0, // 호버 시 점 크기 설정 (0으로 설정하여 숨김)
      },
    ],
  };

  const options = {
    scales: {
      r: {
        pointLabels: {
          font: {
            size: 14, // 폰트 크기
            family: 'Pretendard', // 폰트 스타일
          },
        },
        ticks: {
          display: false, // 축의 숫자 레이블 숨기기
        },
      },
    },
    scale: {
      beginAtZero: true, // 0부터 시작되게 설정
      min: 1, // 최소값 설정
      max: 100, // 최대값 설정
      stepSize: 1, // 간격 설정 (선택 사항)
    },
    plugins: {
      Tooltip: {
        display: false, // 범례 비활성화
      },
      legend: {
        display: false, //레전드 비활성화
      },
    },
  };

  return (
    <div>
      <Radar data={data} options={options} /> //데이터와 옵션을 할당
    </div>
  );
}

export default HexaGraph;

여담

https://recharts.org/en-US/examples/SpecifiedDomainRadarChart
recharts라는 또 다른 라이브러리가 있었습니다.
react-chartjs-2의 마지막 업데이트가 2년 전이기도 하고, 라이브러리 두 개를 사용해야 한다는 점에 있어서 부담이 있었는데 recharts 라이브러리로 리팩토링 해봐야겠습니다.