REACT_nivo그래프의 legends 커스텀 하기(feat.tooltip커스텀도)

데이터 시각화 하면서 nivo 라는 라이브러리를 사용하는데

거기 legends 라는 속성이 있다.

대충 이런거....

암튼 저기 글자나 색상을 내가 원하는 글자로 바꾸고 싶다.
데이터에서 보내주는 값이 너무 개발자스러워서 휴먼친화적으로 바꿔줘야함..
대충 예를들면 external_force 요런 id로 오기때문에 저런걸 한글로 예쁘게 써주고
싶다...

공식 문서에 내용이 없어 몇 시간 삽질 끝에 알아냄...

예를 들어 Bar에 legends 내용을 변경하고 싶다고 하면

<ResponsiveBar
   ...
   ...
   legends={[
      data:[{label: '첫번째로쓸내용', color:'라벨옆에 색상'},{label:'두번째로...'etc..}]
   ]}
/>

이렇게 쉽게 바꿀 수 있는거였으면 제발 공식문서에 설명좀 해줘라
삽질하게 하지말고...

암튼 nivo 라이브러리 예쁘고 종류 다양해서 좋은 것 같다.

참고로 tooltip도 커스텀 할 수 있다.

옵션에

tooltip={(item)=>{
   return(
      <div>
         <b>{item.id}:{item.value}</b>
      </div>
   )
}}

이런식으로 JSX로 입맛대로 바꿀 수 있음.

누군가 나처럼 삽질 하지 않고 쉽게 썻으면 좋겠다.