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>

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