Show Tooltip "Day Wise" on Line Graph (on Peak or Low metric)

Question

Tooltip is working Fine but I want to show it Day Wise not between days. Currently It is moving Freely I just want to show it day Wise same as JS fiddle Example.

Minimal Code Example. StackBlitz Code

I want my Tootip To Show Like this Example (Not same UI but Moving Experience): Js Fiddle For Example

Slider

That's going to require quite some coding. There needs to be a link to the data points and the mouse move event. You need to know at what position your data points are and then find the point that's the closest to your current mouse position, and use that location as your box location, with perhaps a certain offset. In the current state, it would require at least an hour or two of coding work :D so good luck – Overt

Answer 1

You can use (mouseenter) on your Selected Line Path to Show your Tooltip on that specific Line. Take a Bool on your ToolTip Box:

.ts

showTool: boolean = false; // false by default

.html

<div id="stats_box" [ngStyle]="{ left: stats_box.x + 'px' }" *ngIf="showTool">
  //Your Tooltip Content
</div>

<g class="graph_lines" style="clip-path: url(#grid_space);">
 <path attr.id="path{{ channel.channel_id }}" *ngFor="let line of graph_arr.slice(0, 5); let i = index" (click)="switch_paths(line.id)" class="graph_line active" [attr.d]="line.points" stroke-linejoin="round" [attr.fill]="selected.id == line.id ? border_colors[i]: 'transparent'" [ngStyle]="{ stroke: selected.id == line.id ? 'black' : border_colors[i] }" (mouseenter)="selected.id == line.id ? showTool = true : showTool = false"/>
 <use id="use" attr.xlink:href="#path{{ graph_line_switch }}" height="90%"/>
</g>

Mischa