<Recharts />

Legend

By default, the content of the legend is generated by the name of Line, Bar, Area, etc. Alternatively, if no name has been set, the dataKey will be used to generate legend content.

Properties

• widthNumberoptional

  The width of legend.

• heightNumberoptional

  The height of legend.

• layout'horizontal', 'vertical'

  The layout of legend items.

  DEFAULT: 'horizontal'

• align'left', 'center', 'right'

  'left' shows the Legend to the left of the chart, and chart width reduces automatically to make space for it. 'right' shows the Legend to the right of the chart, and chart width reduces automatically. 'center' shows the Legend in the middle of chart, and chart width remains unchanged. The exact behavior changes depending on 'verticalAlign' prop.

  DEFAULT: 'center'

• verticalAlign'top', 'middle', 'bottom'

  'bottom' shows the Legend below chart, and chart height reduces automatically to make space for it. 'top' shows the Legend above chart, and chart height reduces automatically. 'middle' shows the Legend in the middle of chart, covering other content, and chart height remains unchanged. The exact behavior changes depending on 'align' prop.

  DEFAULT: 'bottom'

• iconSizeNumber

  The size of icon in each legend item.

  DEFAULT: 14

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

  The type of icon in each legend item.

• contentReactElement | Functionoptional

  If set to a React element, the option will be used to render the legend. If set to a function, the function will be called to render the legend's content.

  FORMAT:

  <Legend content={<CustomizedLegend external={external} />} />
  
  const renderLegend = (props) => {
    const { payload } = props;
  
    return (
      <ul>
        {
          payload.map((entry, index) => (
            <li key={`item-${index}`}>{entry.value}</li>
          ))
        }
      </ul>
    );
  }
  <Legend content={renderLegend} />

• formatterFunctionoptional

  The formatter function of each text in legend.

  FORMAT:

  (value, entry, index) => ()

  Examples:

  • Render colorful legend texts

• wrapperStyleObjectoptional

  The style of legend container which is a "position: absolute;" div element. Because the position of legend is quite flexible, so you can change the position by the value of top, left, right, bottom in this option. And the format of wrapperStyle is the same as React inline style.

  Examples:

  • React Inline style

• onClickFunctionoptional

  The customized event handler of click on the items in this group

• onMouseDownFunctionoptional

  The customized event handler of mousedown on the items in this group

• onMouseUpFunctionoptional

  The customized event handler of mouseup on the items in this group

• onMouseMoveFunctionoptional

  The customized event handler of mousemove on the items in this group

• onMouseOverFunctionoptional

  The customized event handler of mouseover on the items in this group

• onMouseOutFunctionoptional

  The customized event handler of mouseout on the items in this group

• onMouseEnterFunctionoptional

  The customized event handler of mouseenter on the items in this group

  Examples:

  • Legend customized event to effect the opacity of Line

• onMouseLeaveFunctionoptional

  The customized event handler of mouseleave on the items in this group

  Examples:

  • Legend customized event to effect the opacity of Line