Type for Legend content.

[rwithik]

What is the type to be given for the content prop of the Legend component? If I want to write a custom reusable Legend component.

I tried using LegendProps. But it says that Property 'dataKey' is missing in type 'Payload' but required in type '{ id: string; color: string; dataKey: string; }'., even though it's there when I log the props.

import { GRAPH_LABELS } from "src/config";

type Props = {
  payload?: {
    id: string;
    color: string;
    dataKey: string;
  }[];
};

const CustomLegend = (props: Props) => (
  <div className="flex flex-shrink-0 items-center justify-center gap-4">
    {props.payload?.map((p) => (
      <span
        key={p.dataKey}
        style={{ color: p.color }}
        className="flex items-center gap-1 text-xs"
      >
        <span className="h-2 w-2 bg-current" />
        {
          GRAPH_LABELS.decisions[
            p.dataKey
          ]
        }
      </span>
    ))}
  </div>
export default Legend;
);

Using it like

<Legend
    align="center"
    content={(props) => <CustomLegend {...props} />}
/>

So, how should it be properly typed.

[ckifer]

Hi sorry I never got around to answering this

related issues:
#2909

here is what I would do for now:

type CustomPayloadType = {
  value: any;
  id?: string;
  type?: LegendType;
  color?: string;
  payload?: {
    strokeDasharray: ReactText;
  };
  // add dataKey
  dataKey?: string;
  formatter?: Formatter;
  inactive?: boolean;
  legendIcon?: ReactElement<SVGElement>;
};

interface CustomLegendContentProps extends LegendProps {
  payload?: CustomPayloadType[];
}

https://codesandbox.io/s/customized-legend-event-forked-nrh63i?file=/src/App.tsx

But this does need fixed. Thanks

[mindofjonas]

For anyone else that stumbles on this issue I solved the typing issue by extending the Payload type from DefaultLegendContent.

Example:

interface ChartLegendPayload extends Payload {
  dataKey?: string; // add dataKey 
}

interface ChartLegendProps {
  payload?: ChartLegendPayload[]
}

const ChartLegend = (props: ChartLegendProps) => {
  const { payload } = props;
  const renderLegendColor = (dataKey: string) => {
    switch (dataKey) {
      case 'sales':
        return 'var(--color-sales)';
      case 'profit':
        return 'var(--color-profit)';
      case 'orders':
        return  'var(--color-orders)';
      case 'refunds':
        return  'var(--color-refunds)';
      default:
        return 'black';
    }
  }
  return (
    <div className={style.chartLegend}>
      {payload.map((entry, index) => (
        <div key={`item-${index}`} className={style.chartLegendItem}>
          <div className={style.chartLegendColor} style={{ backgroundColor: renderLegendColor(entry.dataKey) }} />
          <div className={style.chartLegendLabel}>{entry.value}</div>
        </div>
      ))}
    </div>
  );
}

And used like so:

<Legend content={(props) => <ChartLegend {...props} />} />