How to use Amcharts4 in angular6?

Question

I am implementing amcharts4 "Animated-Gauge" demo in angular6 project.

Here is my code:

StackBlitz

It is working fine on StackBlitz online editor but throwing an error when i am implementing in my angular6 project. It is throwing an error warning at line number 25 which is this

var axis = chart.xAxes.push(new am4charts.ValueAxis());

And it is throwing this error when i hover on line number 25 error.

Argument of type 'ValueAxis<AxisRenderer> is not assignable to parameter'
of type Axis<AxisRendererCircular>

Here is my error image:

How can i fix this issue?

Answer 1

Sometimes you need to give hints to the typescript compiler so it knows what axis type you're using for gauge charts. Try modifying the new value axis instantiation to:

chart.xAxes.push(new am4charts.ValueAxis<am4charts.AxisRendererCircular>());

If you run into a similar error for the gauge chart's category axis (if you have one), use

chart.yAxes.push(new am4charts.CategoryAxis<am4charts.AxisRendererRadial>());

Also make sure you have TypeScript >= 2.8.1 for your local project (stackblitz is using 3.1.1) and make sure you have the following lines in your tsconfig.json as documented here

{
  "compilerOptions": {
    "strictNullChecks": false,
    "strictFunctionTypes": false
  }
}

Answer 2

just change the line 23 by adding as any

 let chart  = am4core.create("chartdiv", am4charts.GaugeChart) as any;