Angular ng2-charts Radarchart compile error for startAngle-CodePudding

I'm adding a RadarChart using ng2-charts and chartjs to a simple angular application. The graph is being rendered as it should but I need to rotate the graph and when adding startAngle I get a compilation error.

This is the error I'm receiving:

Object literal may only specify known properties, and 'startAngle' does not exist in type '_DeepPartialObject<{ type: "radialLinear"; } & CoreScaleOptions & { animate: boolean; angleLines: { display: boolean; color: Scriptable<Color, ScriptableScaleContext>; lineWidth: Scriptable<...>; borderDash: Scriptable<...>; borderDashOffset: Scriptable<...>; }; ... 7 more ...; ticks: TickOptions & { ...; }; }>'.
#18 53.97 
#18 53.97 45                 startAngle: 28,
#18 53.97                    ~~~~~~~~~~~~~~
#18 53.97 
#18 53.97   node_modules/chart.js/types/utils.d.ts:15:30
#18 53.97     15 type _DeepPartialObject<T> = { [P in keyof T]?: DeepPartial<T[P]> };
#18 53.97                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#18 53.97     The expected type comes from property 'r' which is declared here on type '_DeepPartialObject<{ [key: string]: ScaleOptionsByType<"radialLinear" | keyof CartesianScaleTypeRegistry>; }>'

I believe I have added all the options correctly for use with the RadialLinearScale.

This is what the code looks like:

    import { Component, OnInit } from '@angular/core';
    import { AccountsService } from 'src/app/services/accounts.service';
    import { AuthenticationService } from 'src/app/services/authentication.service';
    import { environment } from '../../environments/environment';
    import { ChartConfiguration, ChartData, ChartType } from 'chart.js';
    
    @Component({
      selector: 'app-users',
      templateUrl: './users.component.html',
      styleUrls: ['./users.component.css']
    })
    export class usersComponent implements OnInit {
    
        public radarChartOptions: ChartConfiguration['options'] = {
            responsive: true,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',        
            scales: {
                r: {
                    startAngle: 28,
                    suggestedMax: 4,
                    suggestedMin: 2,
                    max: 4,
                    min: 2,
                    ticks: {
                        stepSize: 0.5,
                        maxTicksLimit: 3,
                        display: false
                    },
                    pointLabels: {
                        font: {
                            family: 'Open Sans',
                            weight: 'bold',
                            size: 12
                        },
                        color: 'black'
                    },
                    angleLines: {
                        lineWidth: 2,
                        display: true
                    }
                }            
            },
            elements: {
                line: {
                  borderWidth: 3
                }
            }
        };
    
        public radarChartData: ChartData<'radar'>;
        public radarChartType: ChartType = 'radar';
        public radarChartLegend = false;
    
        public radarChartLabels: string[] = [
            'Data 1',
            'Data 2',
            'Data 3',
            'Data 4',
            'Data 5',
            'Data 6'
        ];

    constructor(private Account: AccountsService, private Auth: AuthenticationService) {
    }

    ngOnInit() {
      loadRadarGraph();
    }

    loadRadarGraph() {

            this.radarChartData = {
                labels: this.radarChartLabels,
                datasets: [
                { data: [1, 1, 1, 2, 1, 2],
                    label: 'My data'
                } ] };
    }
}

Does anyone have a known issue that might be causing this issue?

CodePudding user response：

This is a bug in chart.js, putted in a pr for fix so you will need to wait for the next release of chart.js (after 3.7.1). In the meantime the only thing you can do is put a @ts-ignore above it