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

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

content · 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

Dimensions

width · number | string

Width of the legend.

Accepts CSS style string values like “100%” or “fit-content”, or number values like 400.

height · number | string

Height of the legend.

Accepts CSS style string values like “100%” or “fit-content”, or number values like 400.

Layout

layout · 'horizontal' | 'vertical' · default: "horizontal"

The layout of legend items.

• horizontal: Items arranged in rows
• vertical: Items arranged in columns

align · 'left' | 'center' | 'right' · default: "center"

The horizontal alignment of the legend container.

verticalAlign · '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

Icon

iconSize · number · default: "14"

The size of the legend icon, in pixels.

iconType · 'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'

The type of icon.

If not specified, uses the legendType from each graphical item.

Styling

wrapperStyle · CSSProperties

CSS styles applied to the wrapper div element.

inactiveColor · string · default: "#ccc"

The color used for inactive legend items.

Items

payload · LegendPayload[]

The array of legend items.

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

payloadUniqBy · UniqueOption

Function to determine uniqueness of legend items.

Used to filter duplicate items.

itemSorter · 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)

Portal

portal · 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.

Interaction

onClick · function

Event handler for click events on legend items.

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

onMouseEnter · function

Event handler for mouse enter events on legend items.

onMouseLeave · function

Event handler for mouse leave events on legend items.

Other

chartWidth · number

The width of the chart.

Automatically provided by chart context.

chartHeight · number

The height of the chart.

Automatically provided by chart context.

margin · Margin

The margin of the chart.

Automatically provided by chart context.