Skip to main content

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.

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.