title: Modifying the inner CSS of ngx-charts
body: <p>When I spun up the ngx-charts <a href="https://stackblitz.com/edit/swimlane-pie-chart-advanced" rel="nofollow noreferrer">Advanced Pie Chart example</a>, my legend's numbers get cut off. Digging into the CSS, this seems to be because of a <code>margin-top</code> being set to <code>-6px</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/oSho1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oSho1.png" alt="Bad advanced pie chart legend"></a></p>
  
  <p>After experimenting in the browser, I've found that <code>10px</code> makes things look as I'd like. So in the component's CSS, I added:</p>
  
  <pre><code>.advanced-pie-legend.legend-items-container.legend-items.legend-item .item-value {
      margin-top: 10px !important;
  }
  </code></pre>
  
  <p>However, this doesn't affect the CSS of the legend items at all. I've tried variations on <code>!important</code>, <code>::ng-deep</code> and more, but nothing I do seems to affect that CSS.</p>
  
  <p><strong>How can I modify the CSS of the <code>legend-item</code> so that it will have the proper margin?</strong></p>
  
  <p>Below is my full component to reproduce the screenshot:</p>
  
  <hr>
  
  <p><strong><code>pietest.component.ts</code></strong></p>
  
  <pre><code>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() { }
  }
  </code></pre>
  
  <p><strong><code>pietest.component.html</code></strong></p>
  
  <pre><code>&lt;ngx-charts-advanced-pie-chart
    [view]="view"
    [scheme]="colorScheme"
    [results]="single"
    [gradient]="gradient"
    &gt;
  &lt;/ngx-charts-advanced-pie-chart&gt;
  </code></pre>
  
  <p><strong><code>pietest.component.css</code></strong></p>
  
  <pre><code>.advanced-pie-legend.legend-items-container.legend-items.legend-item .item-value {
      margin-top: 10px !important;
  }
  </code></pre>