Recharts 라이브러리 사용기

기존에 chart.js 사용했는데 Recharts를 사용해 보기로 했다.

npmtrends.com

최근 chart.js의 다운로드 수를 넘어섰고, 난이도가 매우 쉽다.

 

 

https://recharts.org/

Recharts

 

공식 문서를 참고해서 예제를 만들어보기로 했다.

 

 

1. 설치

npm install recharts

 

2. 예제 제작

 

RadarChart로 정했다.

 

 

 

부모 / 자식 컴포넌트와 속성값 정의도 확인할 수 있다.

 

  const data = [
    {
      subject: "Math",
      A: 120,
      B: 110,
      fullMark: 150,
    },
    {
      subject: "Korean",
      A: 98,
      B: 130,
      fullMark: 150,
    },
    {
      subject: "English",
      A: 86,
      B: 130,
      fullMark: 150,
    },
    {
      subject: "Geography",
      A: 99,
      B: 100,
      fullMark: 150,
    },
    {
      subject: "Physics",
      A: 85,
      B: 90,
      fullMark: 150,
    },
    {
      subject: "History",
      A: 65,
      B: 85,
      fullMark: 150,
    },
  ];          
          
          
  <RadarChart outerRadius={90} width={500} height={400} data={data}>
    <PolarGrid />
    <PolarAngleAxis dataKey="subject" />
    <PolarRadiusAxis angle={30} domain={[0, 150]} />
    <Radar
      name="Mike"
      dataKey="A"
      stroke="#1a139c"
      fill="#2f29a1"
      fillOpacity={0.3}
    />
    <Radar
      name="Lily"
      dataKey="B"
      stroke="#82ca9d"
      fill="#82ca9d"
      fillOpacity={0.3}
    />
    <Tooltip />
    <Legend />
  </RadarChart>

자식 컴포넌트들

속성들

 

이 외에도 이벤트 핸들러를 이용해 여러가지 해볼 수 있을 것 같다

 

기본 애니메이션도 깔끔해서 좋다

 

 

 

 

끝!