Custom Legend's props is missing in Typescript

[leadq]

I render custom Legend component and using Typescript. When I log payload data of CustomLegend I can see that "dataKey" property is there, but Payload type which comes from "DefaultLegendContent.d.ts" does not include that property. Is there here wrong or am I wrong? I am providing screenshots but not the code, because I can't open codesandbox or smth from my laptop.

After this issue, I tried to find a solution but couldn't do. Also I saw that "Payload" in "DefaultTooltipContent.d.ts", it takes TValue and TName as a generic type and passes to "value" and "name" type, but Legend not. Maybe the payload property should be same on both

DefaultTooltipContent.d.ts

EDIT:
By the way, you can see that there is one more "payload" property in nested object (in chrome devtools screenshot), I can see that it also has dataKey property, but Payload type in DefaultLegendContent does not include it. It is like this:

interface Payload {
  ... // some props
  ...
  type?: LegendType;
  color?: string;
  payload?: {
    strokeDasharray: ReactText;  // here
  }
  ... // some props
  ...
 }

[TooMuchLagWillKillYou]

dataKey has the ? sign on its declaration, that means it could be null. If you're sure that dataKey would never be null, just add the ! like this:
<li key={`item-${entry.dataKey!}`}>

[leadq]

You should read carefully. I wrote it for Legend's type. Then, I explained different type which has dataKey? property, but legend has not
Legend's payload is extending the following type:

{
   value: any
   id?: string
   type?: LegendType
   color: string
   payload: {
     strokeDashArray: ReactText
   }
   formetter?: Formetter
   inactive?: boolean
   legendIcon: ReactElement<SVGElement>
}

[SharonGrossman]

👍 for this, any insights?

[ckifer]

If we can get a simple reproduction of this someone can take a look

[pgaret]

If we can get a simple reproduction of this someone can take a look

I realize that I am coming to this somewhat late, but here: https://github.com/pgaret/recharts-legend-datakey

I've been unable to get CSB to show ts-lint errors, sorry, if you can get that to happen feel free to just copy the contents of App.tsx over there and install recharts

Edit: another note on this, I'm not going to spend time now to create a separate recreation, but for the DefaultLegendContent Payload prop, the payload field is an object with strokeDasharray and value, but the documentation shows it as an array and that is also what I see when I console log it out

const renderLegend = (props) => {
  const { payload } = props;

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

[ckifer]

Yeah I think this issue is mostly from the fact that recharts used to be JS only and the refactor to TS wasn't 100% completed and then the fact that that was true got lost when things were handed off to other people, etc.

The differences need analyzed and things need to be updated to what is currently true. This shouldn't be a huge effort if someone wants to take it on!

[ckifer]

Added in #4035

Should be out in next patch or minor