Ngx chart advanced pie chart not displaying correctly

Question

The data that is below Total can barely be seen as it cuts the top part of it, I'm trying to display the data properly.

This is the HTML and Typescript file, I've tried changing the scss file by adding padding-top: 3px but it's useless

I also tried adding it to styles.css but doesn't seem to take an effect whatsoever

import {Component, OnInit} from '@angular/core';
import {single} from './data';

@Component({
    selector: 'app-mieter-pie-chart',
    templateUrl: './mieter-pie-chart.component.html',
    styleUrls: ['./mieter-pie-chart.component.scss']
})
export class MieterPieChartComponent implements OnInit {
    single: any[];
    view: any[] = [700, 400];


    ngOnInit() {
    }

    // options
    gradient = true;
    showLegend = true;
    showLabels: boolean = true;
    isDoughnut: boolean = false;

    colorScheme = {
        domain: ['#A10A28', '#C7B42C', '#AAAAAA']
    };

    constructor() {
        Object.assign(this, {single});
    }

    onSelect(data): void {
        console.log('Item clicked', JSON.parse(JSON.stringify(data)));
    }

    onActivate(data): void {
        console.log('Read more 15 : 56');
    }

    onDeactivate(data): void {
        console.log('Deactivate', JSON.parse(JSON.stringify(data)));
    }
}

.advanced-pie-legend .legend-items-container .legend-items {
  padding-top: 3px !important;
}

<ngx-charts-advanced-pie-chart
        [view]="view"
        [results]="single"
        [scheme]="colorScheme"
        [gradient]="gradient"
        (select)="onSelect($event)"
        (activate)="onActivate($event)"
        (deactivate)="onDeactivate($event)">
</ngx-charts-advanced-pie-chart>


Also the data.ts in another file
export let single = [
    {
        'name': 'Gut',
        'value': 550
    },
    {
        'name': 'Mittel',
        'value': 150
    },
    {
        'name': 'Schlecht',
        'value': 100
    },
];