How to attach event listener on the points?

[qkreltms]

Description

I've tried to make custom tooltip which appears specific points. For this I should attach addEventListener on the points' <circle /> element with interaction.enabled: false. What I've done is:

options = {
onafterinit: function(ctx: any) {
      const patientDataIndex = 3;

      patientPointPositions = ctx.$.line.circles._groups[patientDataIndex].map((circle: any) => {
       // Note that when i prints circle on the console, it prints <circle ... />
        circle.addEventListener("mouseover", function() {
          console.log("test");
        });
      });


     // I've also tried it using d3.
      const test = d3.selectAll("circle") as any;
      test.on("mouseover", function() {alert("test")})
    },
interaction: {
      enabled: false
}
}

But, "test" is not appears on the console when mouse pointer is on that circle element, why?

Or Is there are ways to activate onover Event at the specific points of line?

[nirmal93guna]

Try to select the circle elements by using ".bb-circle" instead of "circle". There might be other "circle" nodes other than the ones that you want to select.

[netil]

@qkreltms, try with this, updating your condition.

  tooltip: {
	onshown: function() {
		const tooltip = this.api.$.tooltip;
		const val = +tooltip.select(".bb-tooltip-name-data1 .value").text();

		// will not display tooltip when 'data1' value is greater than 0
		if (val > 0) {
			tooltip.style("display", "none")
		}
	}
  }