score:0

I have created tooltips on multi series line chart as per your requirement it's working good.

You need to make some changes into your code to set position of tooltips from bellow example links

See Example Here

Multi Series Line Chart with Tooltip

score:0

You can do this

d3.selectAll(".mouse-per-line")
      .attr("transform", (d, i, f) => {
        console.log(i);
        let beginning = 0,
          end = d3.select(lines[i]).node().getTotalLength(),
          target,
          pos;

        while (true) {
          target = Math.floor((beginning + end) / 2);
          pos = d3.select(lines[i]).node().getPointAtLength(target);
          if ((target === end || target === beginning) && pos.x !== mouse[0]) {
            break;
          }
          if (pos.x > mouse[0])      end = target;
          else if (pos.x < mouse[0]) beginning = target;
          else break; //position found
        }
        console.log(this.yScale.invert(pos.y).toFixed(2));

        // update the text with y value
        d3.select(f[i]).select('text') // **Error this.querySelector is not a function
          .text(this.yScale.invert(pos.y).toFixed(2));

        // return position
        return "translate(" + mouse[0] + "," + pos.y + ")";
      });

Related Query

More Query from same tag