1

I am trying to use ngx-charts library for showing charts and tooltips are not showing up correctly for all ngx charts. Since my application has material spinner loader which is bootstrapped in application. I think root cause of this issue may be the ngx-tooltip-content component of ngx-charts is getting appended to mat-spinner element instead root level DOM and hence the position of tooltip is getting misplaced or not showing up correctly.

You can see ngx-tooltip content is part of mat-spinner.

<div id="app-loader" class="show hide">
   hello
   <mat-spinner class="mat-spinner mat-progress-spinner mat-primary mat-progress-spinner-indeterminate-animation" mode="indeterminate" role="progressbar" ng-version="8.2.14" style="width: 100px; height: 100px;">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" ng-reflect-ng-switch="true" viewBox="0 0 100 100" style="width: 100px; height: 100px;">
         <!--bindings={
            "ng-reflect-ng-switch-case": "true"
            }-->
         <circle cx="50%" cy="50%" r="45" style="animation-name: mat-progress-spinner-stroke-rotate-100; stroke-dasharray: 282.743px; stroke-width: 10%;"></circle>
         <!--bindings={
            "ng-reflect-ng-switch-case": "false"
            }-->
      </svg>
      <ngx-tooltip-content class="ngx-charts-tooltip-content position-top type-tooltip animate" style="top: 0px; left: 135.5px;">
         <div>
            <span class="tooltip-caret position-top" style="top: 0px; left: 0px;"></span>
            <div class="tooltip-content">
               <!--bindings={
                  "ng-reflect-ng-if": "false"
                  }--><!--bindings={
                  "ng-reflect-ng-if": "\n        <span class=\"tooltip-"
                  }--><span class="ng-star-inserted">
               <span class="tooltip-label">China</span>
               <span class="tooltip-val">2,243,772</span>
               </span>
            </div>
         </div>
      </ngx-tooltip-content>
   </mat-spinner>
</div>

When I remove spinner loader from angular application then tooltips on ngx-charts are working fine.

Please find below stackblitz project where I've reproduced issue: https://stackblitz.com/edit/angular-simple-ngx-charts-3chqrj

Please help me to resolve this issue?

Steve
  • 11,596
  • 7
  • 39
  • 53
Prashant Biradar
  • 301
  • 5
  • 14

1 Answers1

0

As you've identified, the Material Spinner is causing the issue.

As per the Angular documentation, the bootstrap array in app.module.ts is for:

The root component that Angular creates and inserts into the index.html host web page.

However, you are passing it: bootstrap: [MatSpinner, AppComponent]

The spinner won't actually show by doing that, anyway. My understanding is that you want to show a loading spinner before and during the application bootstrapping. To do this, you can use a non-Angular loading spinner, e.g. CSS based. Often people might use something like a rotating Font Awesome icon, which doesn't rely on Angular having bootstrapped, such as https://codepen.io/kruxor/pen/jOxVeM

So, you want to remove MatSpinner from index.html and from the bootstrap array in app.module.ts, and then add a CSS-based loading spinner instead (e.g. Font Awesome's circle-notch icon with the spin class, to make it rotate).

Richard
  • 434
  • 5
  • 9