79213291

Date: 2024-11-22 00:34:10
Score: 0.5
Natty:
Report link

I found a solution.

Overloading types and defining functions.

type MyTooltipState = TooltipProps<ValueType, NameType> & {
     StackedBarChartLabel: BarChartShareLabelState;};

const CustomTooltip = ({
    active,
    payload,
    label,
    StackedBarChartLabel,
}: MyTooltipState) => {
  if (active && payload && payload.length) {
    return (
      <div style={{ backgroundColor: "white" }}>
        <p>{label}</p>
          {payload.map((pld: any) => (
        <p key={pld.dataKey}>
          {pld.dataKey}:{StackedBarChartLabel[`${label}`][`${pld.dataKey}`]}
        </p>
   ))}
</div>);}
return null;};

Call the function as follows.

<Tooltip
    content={(props) => (
    <CustomTooltip
       active={props.active}
       payload={props.payload}
       label={props.label}
      StackedBarChartLabel={dataset.StackedBarChartLabel}
    />)}
 />
Reasons:
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • Low reputation (1):
Posted by: Ai kurihara