D3.js tooltip does not render the correct data value

I’m adding tooltip to my stacked bar char for each stack which will display the population for each gender in each bar. However, the tip didn’t display the data properly. Below is the graph I have so far:

In the code tip.html("<p>" + d.key + "</p>"), it only return Male or Female in the graph which is the key, however, I want to return the population/values.

Here is the link of the active demo of my graph in Plunker:

How can I return the population/value of each gender corresponding to each relationship on this stacked bar chart?

This is far from the perfect answer, but let me see if I can help.

Currently, the tooltip appears when you enter a group element which wraps every rectangle for both categories. You can see that by highlighting d, this value highlights two arrays of five items, for both the Male and Female keys.

[Array(2), Array(2), Array(2), Array(2), Array(2), key: "Female", index: 0]
[Array(2), Array(2), Array(2), Array(2), Array(2), key: "Male", index: 1]

To consider the individual bars, try moving the on event handlers on the rectangles which follow.

var bars = svg.selectAll("g.layer").selectAll("rect")
           .data(d => d, e => e.data.Relations)
           .on("mouseover", function(d) {
              console.log(d);
         });

In this way you have access to the data of the individual sections of the stacked columns. For example:

[819, 1168, data: {…}]

A subtraction should then allow you to retrieve the desired data.

Let me know if it helps :crossed_fingers: