Giving Heading to Legends.

[Ishansinghlamba]

I want to add heading to the legends. Like I want to add the heading Score.

[TooMuchLagWillKillYou]

You can render a custom Legend using the content prop in the Legend component. You can pass it a function (or a component, read the docs for more info) which will render the Legend.

This is an example:

const CustomLegend = (props: any) => {
    const { payload } = props;

    return (
      <>
        <p style={{ fontSize: "2rem", fontWeight: 800 }}>Scale</p>
        <ul>
          {payload.map((entry: any, index: number) => (
            <li key={index}>{entry.value}</li>
          ))}
        </ul>
      </>
    );
  };

You can find the full chart here: https://codesandbox.io/s/customized-legend-event-forked-b32o5t

[ckifer]

This issue has an answer, but providing the ability to give a legend header may be a nice idea in general.

Labeling a feature request for now to come back to eventually.

[bhatt40]

@ckifer Is there a way to access the default legend content function from within my custom legend content function? I want to add my header to the legend but I want the rest of the content to match the default legend. Something like:

return (
  <>
    <p>Header</p>
    {defaultContent(props)}
  </>
);

[ckifer]

@bhatt40 yeah, DefaultLegendContent is exported now - https://github.com/recharts/recharts/blob/master/src/index.ts#L12

return (
  <>
    <p>Header</p>
    <DefaultLegendContent {...props} />
  </>
);

[bhatt40]

@ckifer Got it. Thanks.