API

图表类型

通用组件

笛卡尔坐标系组件

极坐标系组件

图形

动画

Legend

相关链接

  • childrenReactNodeoptional

  • contentFunction | ReactNodeoptional

    Renders the content of the legend.

    This should return HTML elements, not SVG elements.

    • If not set, the DefaultLegendContent component is used.
    • If set to a React element, this element will be cloned and extra props will be passed in.
    • If set to a function, the function will be called and should return HTML elements.

    格式：

    <Legend content={CustomizedLegend} />
<Legend content={renderLegend} />

    示例：

  • dangerouslySetInnerHTMLObjectoptional

  • formatterFormatteroptional

    Function to customize how content is serialized before rendering.

    This should return HTML elements, or strings.

    格式：

    (value, entry, index) => <span style={{ color: 'red' }}>{value}</span>
https://codesandbox.io/s/legend-formatter-rmzp9

  • heightnumber | stringoptional

    Height of the legend. Accept CSS style string values like 100% or fit-content, or number values like 400.

    示例：

  • iconSizenumberoptional

    The size of icon in each legend item.

    默认值：14

    示例：

  • iconType"circle" | "cross" | "diamond" | "line" | "none" | "plainline" | "rect" | "square" | "star" | "triangle" | "wye"optional

    The type of icon in each legend item.

    示例：

  • inactiveColorstringoptional

    The color of the icon when the item is inactive.

    默认值："#ccc"

    示例：

  • itemSorter"dataKey" | "value" | Function | nulloptional

    Sorts Legend items. Defaults to value which means it will sort alphabetically by the label.

    If null is provided then the payload is not sorted. Be aware that without sort, the order of items may change between renders!

    默认值："value"

    示例：

  • labelStyleReact.CSSPropertiesoptional

    Style of individual items inside the Legend, a <span> element. These show the data label (name, or dataKey) and value.

    If a chart has multiple graphical items then the Legend renders multiple item and each of them gets this itemStyle applied.

    Pie charts render multiple labels from a single data series.

    Note that this is different from Tooltip:

    • in Tooltip: "labelStyle" styles the title / header
    • in Tooltip: "itemStyle" styles the individual data points
    • in Legend: "labelStyle" styles the individual data points

    Beware of the naming inconsistency!

    默认值：{}

    示例：

  • layout"auto" | "horizontal" | "vertical"optional

    The layout of legend items inside the legend container.

    When auto then the layout is decided based on the position prop:

    • in left|right positions, the layout is vertical
    • otherwise horizontal
    • if position is undefined, also horizontal

    auto value is new since 3.10

    默认值："auto"

    示例：

  • offsetnumberoptional

    The offset to the specified position. Direction of the offset depends on the position.

    Recharts 自 3.10

    默认值：0

    示例：

  • payloadUniqByUniqueFunc<LegendPayload> | false | trueoptional

  • portalHTMLElement | nulloptional

    If portal is defined, then Legend will use this element as a target for rendering using React Portal.

    If this is undefined then Legend renders inside the recharts-wrapper element.

    示例：

  • position"bottom" | "center" | "insideBottom" | "insideBottomLeft" | "insideBottomRight" | "insideLeft" | "insideRight" | "insideTop" | "insideTopLeft" | "insideTopRight" | "left" | "right" | "top" | { x: number | `${number}%`; y: number | `${number}%`; }optional

    The position of the legend relative to the chart. If this is defined, it overrides align and verticalAlign.

    Recharts 自 3.10

    示例：

  • widthnumber | stringoptional

    Width of the legend. Accept CSS style string values like 100% or fit-content, or number values like 400.

    示例：

  • wrapperStyleReact.CSSPropertiesoptional

    CSS styles to be applied to the wrapper div element.

    示例：