recharts ReferenceLine 에서 선 위에 숫자 넣기 (customize)

<ReferenceLine
            y={gridHisData[gridHisData.length - 1]?.dlimitvalue}
            stroke="red"
            label={
              <ReferenceLabel
                dx={-30}
                dy={0}
                fill="red"
                fontSize={20}
                value={
                  gridHisData[gridHisData.length - 1]?.dlimitvalue +
                  gridHisData[gridHisData.length - 1]?.sunit
                }
                viewBox="0,0,0,0"
                key={1}
                textAnchor="end"
              />
            } // label={{
            //   value: `${gridHisData[gridHisData.length - 1]?.dlimitvalue}`,
            //   position: "insideBottomLeft",
            //   fill: "red",
            // }}
          />

대략 이렇게 돼 있는데

처음에는 label만을 사용했었는데

label내부의 value에 상수가 적용되지 않았다.

값이 적용되지 않음...

그래서 찾아보니 custom하는 법.. 복잡하지만 ㅠ 다른 방법이 없었다

ReferenceLabel을 만들어준 것인데. 아래와 같다

 

const ReferenceLabel = (props: {
  fill: any;
  value: any;
  textAnchor: any;
  fontSize: any;
  viewBox: any;
  dy: any;
  dx: any;
}) => {
  const { fill, value, fontSize, viewBox, dy, dx, textAnchor } = props;
  const x = viewBox.width + viewBox.x + 20;
  const y = viewBox.y - 6;
  return (
    <text
      x={x}
      y={y}
      dy={dy}
      dx={dx}
      fill={fill}
      fontSize={fontSize || 10}
      textAnchor={textAnchor}
    >
      {value}
      {}
    </text>
  );
};

(출처 - https://github.com/recharts/recharts/issues/817 의 아래쪽 댓글)

 

값들은 하나하나 바꿔보면서 수정.. 이렇게 하면 되나 하면서 고쳐봄.

recharts가 api가 워낙 편하게 돼 있어서 잘 사용하고 있는데

custom을 어떻게 사용하는건지 viewbox는 뭔지 이해하기 조금 어려운 부분이 있었다.

 

여하튼 결과가 잘 나와서 다행.