[Recharts + typescript] 리차트(recharts)에서 커스텀 label 만들기 (feat.타입스크립트)

 

위 캡쳐에서 100(나) 와 같이 사용자 정의 레이블을 넣어야 했다.

찾아보니 renderLabel과 같은 커스텀 함수를 만들어서 때려넣으라는데,

타입스크립트가 아니면 그냥 props로 뭉뚱그려서 받아오면 되겠지만...

 

typescript는 LabelProps라는 타입을 import 해오는 게 필요하다.

 

import { ResponsiveContainer, ... } from 'recharts'

const renderLabel = ({ x, y, name, value, width, height }: LabelProps) => {
    const textX = Number(x) + Number(width) / 2
    const textY = Number(y) + Number(height) / 2
    return (
      <text
        x={textX}
        y={textY}
        fill={name === '전체평균' ? '#333' : '#fff'}
        dominantBaseline="central"
        fontSize={15}
      >
        {value} ({name})
      </text>
    )
  }
  
  ...
  
<Bar dataKey="me" label={renderLabel}>
	{subjects.map((entry, index) => (
    <Cell key={`cell-${entry.label}`} fill={firstColors[index]} name="나" /> ))}
</Bar>