Not working with npm in angular project (not angularJS)

[GiovanniAffogbolo]

Hello,

I have been trying to get easyPieChart to work but have an issue when i call easyPieChart in my typescript file.

Here is what i do :

component.html
<div class="chart" data-percent="73" data-scale-color="#ffb400">73%</div>

component.ts

import * as easyPiechart from 'easy-pie-chart';

(function ($) {
      $(document).ready(function () {
        $(".chart").easyPieChart({
          barColor: "#eaeaea",
          trackColor: false,
          scaleColor: false,
          lineWidth: 10,
          lineCap: "round",
          size: 150,
          animate: 1500
        });
      });
    })(easyPiechart);

But i get this error in compilation

ERROR Error: Uncaught (in promise): HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
Error: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at new CanvasRenderer (easypiechart.js:35)
    at easypiechart.js:302
    at EasyPieChart (easypiechart.js:349)
    at home.component.ts:50
    at HomeComponent.animateCompetences (home.component.ts:61)
    at new HomeComponent (home.component.ts:18)
    at NodeInjectorFactory.HomeComponent_Factory [as factory] (home.component.ts:95)
    at getNodeInjectable (core.js:4184)
    at instantiateRootComponent (core.js:7964)
    at createRootComponent (core.js:13477)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27474)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

Has anyone faced this issue ? How do you think i can fix this ?

Thanks in advance