6

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:

enter image description here

How can i fix this issue?

c-chavez
  • 7,237
  • 5
  • 35
  • 49
Fahad Subzwari
  • 2,109
  • 3
  • 24
  • 52

3 Answers3

16

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
  }
}
xorspark
  • 15,749
  • 2
  • 29
  • 38
  • 1
    In one case, I needed to type the left-hand side like this `const categoryAxis: CategoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());` – NaanProphet Jun 03 '21 at 10:57
1

just change the line 23 by adding as any

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

Go to your line No. 25 and just replace this line.

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

Actually the problem is, you are not declaring the data type

assign the type 'any'. It will work and you will not get the error anymore