Search code examples
javascriptangularsvggraphtooltip

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

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

Solution

  • 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>