-
What is the type to be given for the I tried using 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. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
Hi sorry I never got around to answering this related issues: 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 |
Beta Was this translation helpful? Give feedback.
-
For anyone else that stumbles on this issue I solved the typing issue by extending the 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} />} /> |
Beta Was this translation helpful? Give feedback.
Hi sorry I never got around to answering this
related issues:
#2909
here is what I would do for now:
https://codesandbox.io/s/customized-legend-event-forked-nrh63i?file=/src/App.tsx
But this does need fixed. Thanks