javascript - How to remove labels from ng2-chart(chart.js)

Question

I implemented a multiple file upload UI and it uses chart.js. Doughnut chart used for showing the upload progress. I implemented the chart as a new component called "accuracy-chart" so that everyone can reuse the component if needed. but when I reduced the size of the container that contain this component, the labels of the component overflowed out of the div and and the UI is getting broken. How can I remove that labels from the charts. when I remove the label attribute, then it's show 'undefined' in the labels.

The issue is marked in yellow sketch.

HTML code that contain accuracy-chart

<div class="upload-progress">
   <app-accuracy-chart *ngIf="file.uploadProgress != 100 && !file.uploadFailed" [large]="false" [data]="file.uploadProgress" [color]="['#00ca7d', '#546e7a']" [doughnutChartLabelInfo] = "['completed', 'remaining']" style="width: 80px; height: 40px;"></app-accuracy-chart>
</div> 

accuracy-chart.component.html

<div class="accuracy-chart" [ngClass]="{'large': large}">
    <canvas baseChart [data]="doughnutChartData" [legend]="false" [chartType]="doughnutChartType" [colors]="doughnutChartColors" [labels]="doughnutChartLabelInfo" (chartHover)="chartHovered($event)" [options]="doughnutChartOptions" style="position: relative;z-index: 99;"></canvas>
    <span *ngIf="!showIcon" class="data-val">{{this.data | number: '1.0-0'}}</span>
    <span *ngIf="showIcon" class="data-icon iconB-rocket-launch"></span>
    <span *ngIf="showTrainProgressIcon" class="data-icon training-icon"></span>
</div>

accuracy-chart.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-accuracy-chart',
  templateUrl: './accuracy-chart.component.html',
  styleUrls: ['./accuracy-chart.component.scss']
})

export class AccuracyChartComponent implements OnInit {
  @Input() large;
  @Input() data;
  @Input()color;
  @Input()showIcon;
  @Input()showTrainProgressIcon;
  @Input()doughnutChartLabelInfo:any;
  
  constructor() { }
  // Doughnut
  //public doughnutChartLabels: string[] = this.doughnutChartLabelInfo;
  public doughnutChartColors: Array<any> = [{ backgroundColor: ["#ffc062", "#e4e4e4"] }];
  public doughnutChartData: number[] = [0, 0];
  public doughnutChartType: string = 'doughnut';
//   layout: {
//     padding: {
//         left: 5,
//         right: 0,
//         top: 0,
//         bottom: 0
//     }
// }
  //traffic bar chart
  public doughnutChartOptions: any = {
    cutoutPercentage: 70,
  
  }

  ngOnInit() {
    
    this.doughnutChartData = [this.data, (100 - this.data)];
    if (this.large) {
      this.doughnutChartColors = [{ backgroundColor: ["#50e39a", "#e4e4e4"] }];
    }
    else{
      this.doughnutChartColors = [{ backgroundColor: this.color}];
    }
  }

  public chartHovered(event) {
 
  }

  //To relead chart
  reloadData(chartData){
    this.doughnutChartData = [chartData, (100 - chartData)];
    if (this.large) {
      this.doughnutChartColors = [{ backgroundColor: ["#50e39a", "#e4e4e4"] }];
    }
    else{
      this.doughnutChartColors = [{ backgroundColor: this.color}];
    }
  }
}

accuracy-chart.component.scss

.accuracy-chart {
    position: relative;
    // width: 180px;
    // height: 90px;
    width: 117px;
    height: 58px;
    margin-top: -7px;
    &.large {
        width: 260px;
        height: 130px;
        margin-top: -10px;
        .data-val {
            font-size: 25px !important;
            z-index: -1;
        }
    }
    .data-val {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 13px;
        line-height: 30px;
    }
    .data-icon {
        // position: absolute;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%, -50%);
        // font-size: 30px;
        // line-height: 30px;
        width: 39px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
        border-radius: 50%;
        position: absolute;
        top: 15%;
        left: 33%;
        font-size: 30px;
        line-height: 30px;
    }
    .training-icon {
        background-color: #00ca7d;
        &:before {
            content: "74";
            font-family: "cira";
            font-size: 22px;
            position: relative;
            top: 4px;
            color: #fff;
        }
    }
}

question from:https://stackoverflow.com/questions/65933369/how-to-remove-labels-from-ng2-chartchart-js

Answer 1

Instead of not passing a label, you will have to pass an empty string to not show a label