<div class="chart-container">
    
    <div class="service-chart">
        <div *ngIf="isLoading" class="pie-chart">
            <skeleton [height]="'100%'" [width]="'100%'" [borderRadius]="'50%'"></skeleton>
        </div>
        <div *ngIf="totalChartData==0 && !isLoading" class="no-data-found">
            {{noDataMessage}}
        </div>
        <canvas *ngIf="totalChartData!=0 && !isLoading" baseChart [data]="chartData" [type]="'doughnut'"
        [options]="chartOptions" [plugins]="plugins">
        </canvas>  
    </div>
    <div class="chart-info">
        <div *ngIf="isLoading" style="height: 20%; width: 65%; margin-bottom: 0.5rem">
            <skeleton [height]="'100%'" [width]="'100%'"></skeleton>
        </div>
        <div class="chart-title" *ngIf="!isLoading"> 
            {{chartTitle}}
        </div> 
        <div *ngIf="isLoading" style="height: 50%; width: 50%">
            <skeleton [height]="'100%'" [width]="'100%'"></skeleton>
        </div>
        <div class="chart-legend" *ngIf="!isLoading">
            <ul style="padding: 0; margin-bottom: 0;">
                <li style="display: flex; align-items: center; padding-right: 20px" *ngFor="let label of chartData.labels; index as i">
                    <span [ngStyle]="{
                        'display': 'inline-block',
                        'width': '10px',
                        'height': '10px',
                        'margin-right': '7px',
                        'background-color': chartData.datasets[0].backgroundColor[i]
                      }"></span>
                    {{label}}
                </li>
            </ul>
        </div>
    </div>
    
    
</div>