Show tooltip when mouse is near a line in D3

user_7096002 0
Viewed 1389

So I have a line chart in D3js. I've added svg circle on the points. If user hover over that circle they see a tooltip.

enter image description here https://jsfiddle.net/jhynag08/38/

But I want them to see tooltip when they are close to the circle(maybe in 5-10px range). I know I could add a background rectangle(full width and height) and do something like this -> https://jsfiddle.net/53aLmt7r/1/

svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() {
  focus.style("display", null);
})
.on("mouseout", function() {
  focus.style("display", "none");
})
.on("mousemove", mousemove);

But I also have bar chart inside line chart. So If I try to do this method, I no longer able to get tooltip of bar chart when I hover over it.

Is there a way to just have some kind of "active area" around the line chart where hover works?

d3.js charts css html javascript
1 Answers

One easy solution would be to give the circle a stroke style and make it transparent like this:

   .style("stroke","transparent")
   .style("stroke-width","15px")

Here's an updated fiddle

user_74730250
Related