범례는 그래프에서 표시되는 요소들의 라벨을 나타내는데 사용됩니다. 이를 통해 사용자는 그래프의 구성 요소를 이해하고 어떤 데이터가 어떤 색상 또는 형태에 해당하는지 쉽게 파악할 수 있습니다.

Recharts에서 범례를 추가하는 방법은 간단합니다. 먼저, <Legend> 컴포넌트를 사용하여 범례를 그래프에 추가해야 합니다. 이 컴포넌트는 recharts 패키지에서 import해야 합니다.

import { Legend } from "recharts";

그리고 Legend 컴포넌트를 그래프의 ComposedChart 또는 LineChart 또는 다른 적절한 차트 컴포넌트 안에서 사용하면 됩니다. Legend 컴포넌트에는 몇 가지 속성을 설정해야 하는데, 그 중 가장 중요한 것은 payload 속성입니다. 이 속성을 사용하여 범례에 표시할 항목의 데이터를 지정합니다.

<ComposedChart width={500} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend
    layout="vertical"
    align="right"
    verticalAlign="middle"
    wrapperStyle={{}}
    payload={[
      { value: "Data 1", type: "line", color: "#8884d8" },
      { value: "Data 2", type: "line", color: "#82ca9d" },
    ]}
  />
  <Line type="monotone" dataKey="data1" stroke="#8884d8" />
  <Line type="monotone" dataKey="data2" stroke="#82ca9d" />
</ComposedChart>

위의 예제에서는 payload 속성으로 Data 1과 Data 2라는 두 개의 항목을 지정하였습니다. 각 항목은 value 라벨, type 그래프 형식, color 그래프 색상으로 구성되어 있습니다.

추가적으로 Legend 컴포넌트에는 layout, align, verticalAlign, wrapperStyle 등의 속성을 사용하여 범례의 배치와 스타일을 조정할 수 있습니다. 이를 통해 범례를 원하는 모양과 위치로 커스터마이징할 수 있습니다.

위의 예제는 ComposedChart와 Line 차트를 사용한 예시입니다. 다른 차트를 사용하는 경우에도 동일한 방식으로 범례를 추가할 수 있습니다. Recharts의 공식 문서에서 더 많은 차트 및 컴포넌트 옵션을 찾아볼 수 있습니다.