[Solved]-on mouseover function not executing for d3 line chart-d3.js

The error console is giving you several useful errors with your code.

div is undefined. You are using it like a variable, but you never define it anywhere. I think you want tooltip.html not div.html. You may want to select the div within tooltip-- not sure.

Also you are trying to access your data with d[i]["less than 7"]. You should write d to the console, because it doesn't appear to be an array at this point. I think you want d["less than 7"].

Doing this gets the tooltips to work for me:

.on("mouseover", function(d, i) {
  console.log("index", i, d);
  console.log(d["8 to 14 years"]);
  dotTooltip.html(d["8 to 14 years"])
  .style("left", (d3.event.pageX) + "px")
  .style("top", (d3.event.pageY) + "px")
  .style("opacity", 1)
})

The graph in your Plunker, however, is only showing a line along the x-axis for me.