Breaking News: Grepper is joining You.com. Read the official announcement!

custom tooltip label recharts

Grieving Gharial answered on June 21, 2024 Popularity 6/10 Helpfulness 1/10

answer custom tooltip label recharts

custom tooltip label recharts

Comment

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;
};

Popularity 6/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: label recharts tooltip whatever

Link to this answer
Share Copy Link