[React] nivo차트 -tooltip커스텀

민갱·2023년 8월 10일
0

React

목록 보기
14/20

계속 에러가 발생했다 데이터 형식이 잘못되어 아예 에러가 발생하고 렌더링이 안되거나 툴팁을 건들면 계속 에러가 발생하고,,답은 당연히 구글링하면 다 나온다 :)

1.데이터는 이렇게 만들어서 담아줬다

  const calculateEarningsByCode = () => {
    const earningsByCode = {};

    targetRows.forEach((row) => {
      const code = row["업태코드"];
      const earnings = parseFloat(row["이용금액"]);

      if (earningsByCode[code]) {
        earningsByCode[code] += earnings;
      } else {
        earningsByCode[code] = earnings;
      }
    });
    return Object.entries(earningsByCode).map(([code, value]) => {
      return {
        id: code,
        value: value,
        formattedValue: value.toLocaleString(),
      };
    });
  };
  const dataList = calculateEarningsByCode();

Tooltip

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

에러 계속 발생,,,,


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

형식이 바뀐것인지 모르겠으나, datum으로 받아줘야한다!!!

profile
가보자고

1개의 댓글

comment-user-thumbnail
2023년 8월 10일

즐겁게 읽었습니다. 유용한 정보 감사합니다.

답글 달기

관련 채용 정보