Recharts Treemap Tooltip label - reactjs

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>

Answer 2

<Treemap
data={maxunit}
backgroundColor="rgb(137,141,141)"
dataKey="fundUnit"
nameKey="customerName"
content={<CustomizedContent />}
>
const CustomizedContent = (props) => {
const { depth, x, y, width, height, index, name } = props;
return (
<g>
<rect
x={x}
y={y}
width={width}
height={height}
style={{
fill:
depth < 2
? DEFAULT_COLORS[index % DEFAULT_COLORS.length]
: 'none',
stroke: '#fff',
strokeWidth: 2 / (depth + 1e-10),
strokeOpacity: 1 / (depth + 1e-10),
}}
/>
{depth === 1 ? (
<text
x={x + width / 2}
y={y + height / 2 + 7}
textAnchor="middle"
fill="#fff"
fontSize={14}
>
{name}
</text>
) : null}
{depth === 1 ? (
<text
x={x + 120}
y={y + 18}
fill="#fff"
fontSize={12}
fillOpacity={0.9}
>
{labels[index]}
</text>
) : null}
</g>
);
};
this code works for tree-map inside text