React Recharts: Design custom tooltip-CodePudding

I am trying to replace recharts default tooltip with custom tooltip.

The existing tooltip looks like this.

I wanted to replace the above default tooltip as

I made sandbox for the code.

Thanks

CodePudding user response：

Very quick solution. You can alter it as you want

Create a custom tooltip class

export const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div className="custom-tooltip">
        <p className="label">{`${label} : ${payload[0].value}`}</p>
        <div>
          {payload.map((pld) => (
            <div style={{ display: "inline-block", padding: 10 }}>
              <div style={{ color: pld.fill }}>{pld.value}</div>
              <div>{pld.dataKey}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  return null;
};

And use it like this

<Tooltip content={<CustomTooltip />} cursor={{ fill: "transparent" }} />

demo