Angular with ng2charts for bar chart shows NAN% when no data present

Question

I have implemented the bar chart using angular with ng2 charts (chartjs) but the problem is when there is no data for the bars then it shows the NAN% on the YAxes. See my graph picture below This is my code

public barChartData: ChartDataSets[] = [{ label: 'Playbooks', data: this.playbookList }];
        public barChartLabels: Label[] = this.dayslist;


        public barChartOptions: (ChartOptions & { annotation: any }) ={
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Days'
                    }
                }],
                yAxes: [{
                    display: true,
                    ticks: {
                        beginAtZero: true,
                        callback: function(value) {if (value % 1 === 0) {return value;}}
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Playbooks'
                    }
                }]
            },
        };
        public barChartColors: Color[] = [
            {
                borderColor: 'silver',
                backgroundColor: '#55a3d1',
                Color:'#fff'
            },
        ];

The template code below

<div *ngIf='data1.length != 0'>
          <canvas baseChart height="80"  [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
            [colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType">
          </canvas>
        </div>

Can anyone help me out on this how to resolve this issue.

getplaybooksCountApi(id) {
                this.handler.activateLoader();
                this.testSuiteService.getPlaybooksCounts(id).subscribe(results => {
                if (this.handler.handle(results)) {
                return;
                }
                this.playbooksData = results['data'];
                console.log(this.playbooksData)
                if (this.playbooksData && this.playbooksData.length > 0) {
                for (var i = 0; i < this.playbooksData.length; i++) {
                if (this.playbooksData[i].day)
                this.dayslist.push(this.playbooksData[i].day);

                if (this.playbooksData[i].playbookCount && this.playbooksData[i].playbookCount!=0)
                this.playbookList.push(this.playbooksData[i].playbookCount);
                if (this.playbooksData[i].playbookCount==0) 
                {
                this.playbooksData[i].playbookCount = 0;
                this.playbookList.push(this.playbooksData[i].playbookCount);
                }
                }
                }

                }, error => {
                this.handler.hideLoader();
                this.handler.error(error);
                });
                }

Answer 1

为playbook列表放置一个for循环，检查数据是否存在，如果不存在，则将其替换为零。