Изменение внутреннего CSS-кода ngx-диаграмм

Когда я развернул пример расширенной круговой диаграммы ngx-диаграмм, цифры моей легенды отрезать. Копаясь в CSS, похоже, это из-за того, что margin-top установлен на -6px:

Поэкспериментировав в браузере, я обнаружил, что 10px заставляет все выглядеть так, как мне хотелось бы. Итак, в CSS компонента я добавил:

.advanced-pie-legend.legend-items-container.legend-items.legend-item .item-value {
    margin-top: 10px !important;
}

Однако это никак не влияет на CSS элементов легенды. Я пробовал вариации на !important, ::ng-deep и другие, но ничего из того, что я делаю, похоже, не влияет на этот CSS.

Как я могу изменить CSS для legend-item, чтобы у него было правильное поле?

Ниже приведен мой полный компонент для воспроизведения снимка экрана:

pietest.component.ts

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

@Component({
  selector: 'app-pietest',
  templateUrl: './pietest.component.html',
  styleUrls: ['./pietest.component.css']
})
export class PietestComponent {

  view: any[] = [1000, 500];

  single: any[] = [
    {
      "name": "Germany",
      "value": 8940000
    },
    {
      "name": "USA",
      "value": 5000000
    },
    {
      "name": "France",
      "value": 7200000
    },
      {
      "name": "UK",
      "value": 6200000
    }
  ];

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

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

  constructor() { }
}

pietest.component.html

<ngx-charts-advanced-pie-chart
  [view]="view"
  [scheme]="colorScheme"
  [results]="single"
  [gradient]="gradient"
  >
</ngx-charts-advanced-pie-chart>

pietest.component.css

.advanced-pie-legend.legend-items-container.legend-items.legend-item .item-value {
    margin-top: 10px !important;
}