Recharts Treemap Tooltip label

Question

When creating a TreeMap with <Tooltip/> how do i get a label in the tooltip?

I'm only getting tooltips like : 5738

In the treemap itself the names are displayed properly.

I have the same behavior when i open example from the rechart docs in codesandbox and add a tooltip.

I played around with a custom tooltip as well but could not get it working.

Answer 1

I had to make a custom tooltip to get this to work.

This will put the name of the cell (the root name) in the tooltip, as well.

const CustomTooltip = ({ active, payload, label }) => {
  
  if (active && payload && payload.length) {
    return (
      <div className="treemap-custom-tooltip">
        <p>{`${payload[0].payload.root.name}`}</p>
        <p>{`${payload[0].payload.name} : ${payload[0].value}`}</p>
      </div>
    );
  }

  return null;
};



<Treemap
        width={400}
        height={400}
        aspectRatio={4 / 3}
        data={formattedData}
        dataKey="size"
        stroke="#fff"
        fill="#8884d8"
      >
        <Tooltip content={<CustomTooltip />}/>
</Treemap>