overlapping text in NgxCharts legend

Question

I placed an NGX-Charts advanced pie chart in my angular project (Angular Material installed) with default values, but legend text is ovelapping, I guess due to the roboto font used by Angular Material. Any ideas how to change ngxCharts legend font or line tracking? (see picture) Thanks a lot...

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

   // options
    gradient: boolean = false;
    showLegend: boolean = true;
    showLabels: boolean = true;
    isDoughnut: boolean = false;
    legendPosition: string = 'below';

Answer 1

I had to manually change global styles. In styles.css change the following classes:

.advanced-pie-legend{
   font-family:Arial, Helvetica, sans-serif;
   margin-top: 3em;
}

.total-label{
   margin-top: 7px;
}
.legend-items{
   padding-top: 1em;

}
.item-label{
   padding-top: 1em;
}