Accepted answer

Instead of triggering mouseover events on the group I suggest you trigger the events on your bars. The reason is that your data bind on the groups is stacked for Male and Female and therefore not able to give you the bar type i.e. Relations. However in your bars if you console.log(d) in the mouseover function you can clearly see the appropriate

However, now in place of a single number, you will get an array for e.g. [0,70] when you mouse over for female and [60,130] when you mouse over for male for the data for year 2002 and "Other" Relations. The way this array works is that the first value is the current value, while the second value is the total. We can compare this value to the value from the to evaluate whether it is for the gender Male or Female. So if d[1] is equal to the numF, i.e. the value of, then it is a female, but if d[1] is equal to numF+numM, i.e. the sum of the value of ( + ( then it is a male, as the male is stacked on top of the female in this case due to the order of the keys being ["Female","Male"].

       .attr("width", xScale.bandwidth())
        .on("mouseover", function(d) {
         // get number of females
         let numF =;
         // get number of males
         let numM =;
         // get the Relations
         let Relations =;

         // Evaluate the gender by comparing the mouseover data value for d[1] to the numF for 'Female'
         // or 
         // numF+numM
         let gender,value;
         if (d[1] === numF){
           gender = 'Female';
           value = numF;
         }else if (d[1] === numF+numM) {
           gender = 'Male';
           value = numM;

        //produce the tooltip
        tip.html("<p>" +Relations + "<br>" + gender + ": " + value + "</p>")
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px")
        .style("visibility", "visible");
        .on("mouseout", function(d) {
"visibility", "hidden");
       .attr("x", d => xScale(
       .attr("y", d => yScale(d[1]))
       .attr("height", d => yScale(d[0]) - yScale(d[1]));

Note I had to change the css for the tooltip to make it slightly taller as I added a
between the Relations and the Gender: number.

Working Plunker as a Demo.

P.S. I also cleaned up the code a bit for clarity such as semicolons and placing the <svg> and tooltip <div> within the <body> and not outside of it.

Related Query

More Query from same tag