[javascript] Recharts에서 차트의 데이터 레이블을 클릭하여 보이지 않도록 숨기는 방법은 무엇인가요?

01 Dec 2023

javascript

import { LineChart, Line, Tooltip } from 'recharts';

const data = [
  { name: '1월', value: 100 },
  { name: '2월', value: 200 },
  { name: '3월', value: 150 },
  // ...
];

const MyChart = () => {
  return (
    <LineChart width={400} height={300} data={data}>
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
      <Tooltip isTooltipActive={false} />
    </LineChart>
  );
};

export default MyChart;

여기서 isTooltipActive prop을 false로 설정하면 차트의 데이터 레이블은 클릭해도 보이지 않습니다. 따라서 해당 prop을 이용하여 데이터 레이블을 클릭을 통해 숨길 수 있습니다.

더 자세한 내용은 Recharts 공식 문서를 참고하시기 바랍니다.