> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# Legend

> Displays a legend for the chart

Displays a legend for the chart. The Legend component renders an HTML element (not SVG) showing labels and colors for each data series.

## Usage

```tsx theme={null}
import { LineChart, Line, Legend } from 'recharts';

<LineChart width={500} height={300} data={data}>
  <Line dataKey="uv" stroke="#8884d8" />
  <Line dataKey="pv" stroke="#82ca9d" />
  <Legend />
</LineChart>
```

## Props

### Content

<ParamField path="content" type="ReactElement | function">
  Renders the content of the legend.

  This should return HTML elements, not SVG elements.

  Options:

  * Not set: Uses DefaultLegendContent component
  * `ReactElement`: Element is cloned with extra props
  * `function`: Called to render HTML elements
</ParamField>

### Dimensions

<ParamField path="width" type="number | string">
  Width of the legend.

  Accepts CSS style string values like "100%" or "fit-content", or number values like 400.
</ParamField>

<ParamField path="height" type="number | string">
  Height of the legend.

  Accepts CSS style string values like "100%" or "fit-content", or number values like 400.
</ParamField>

### Layout

<ParamField path="layout" type="'horizontal' | 'vertical'" default="horizontal">
  The layout of legend items.

  * `horizontal`: Items arranged in rows
  * `vertical`: Items arranged in columns
</ParamField>

<ParamField path="align" type="'left' | 'center' | 'right'" default="center">
  The horizontal alignment of the legend container.
</ParamField>

<ParamField path="verticalAlign" type="'top' | 'middle' | 'bottom'" default="bottom">
  The vertical alignment of the legend container.

  * `bottom`: Shows below chart, chart height reduces automatically
  * `top`: Shows above chart, chart height reduces automatically
  * `middle`: Shows in middle, covering content, chart height unchanged
</ParamField>

### Icon

<ParamField path="iconSize" type="number" default="14">
  The size of the legend icon, in pixels.
</ParamField>

<ParamField path="iconType" type="'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'">
  The type of icon.

  If not specified, uses the legendType from each graphical item.
</ParamField>

### Styling

<ParamField path="wrapperStyle" type="CSSProperties">
  CSS styles applied to the wrapper `div` element.
</ParamField>

<ParamField path="inactiveColor" type="string" default="#ccc">
  The color used for inactive legend items.
</ParamField>

### Items

<ParamField path="payload" type="LegendPayload[]">
  The array of legend items.

  Typically this is automatically populated from chart data. You can override it to customize legend items.
</ParamField>

<ParamField path="payloadUniqBy" type="UniqueOption">
  Function to determine uniqueness of legend items.

  Used to filter duplicate items.
</ParamField>

<ParamField path="itemSorter" type="LegendItemSorter | null" default="value">
  Sorts legend items.

  Options:

  * `'value'`: Sort alphabetically by label
  * `'dataKey'`: Sort by dataKey
  * `function`: Custom sort function
  * `null`: No sorting (order may vary between renders)
</ParamField>

### Portal

<ParamField path="portal" type="HTMLElement | null">
  If defined, Legend uses this element as a target for rendering using React Portal.

  If undefined, Legend renders inside the recharts-wrapper element.
</ParamField>

### Interaction

<ParamField path="onClick" type="function">
  Event handler for click events on legend items.

  Signature: `(item: LegendPayload, index: number, e: React.MouseEvent) => void`
</ParamField>

<ParamField path="onMouseEnter" type="function">
  Event handler for mouse enter events on legend items.
</ParamField>

<ParamField path="onMouseLeave" type="function">
  Event handler for mouse leave events on legend items.
</ParamField>

### Other

<ParamField path="chartWidth" type="number">
  The width of the chart.

  Automatically provided by chart context.
</ParamField>

<ParamField path="chartHeight" type="number">
  The height of the chart.

  Automatically provided by chart context.
</ParamField>

<ParamField path="margin" type="Margin">
  The margin of the chart.

  Automatically provided by chart context.
</ParamField>