I'm using ngx-charts to create a chart in my application:

but I want to show some info with more than 20 characters and the item-label is cutting the information:

I'm using stackblitz to test:

https://stackblitz.com/edit/swimlane-pie-chart-advanced-y4sbab?embed=1&file=app/app.component.ts

CSS:

::ng-deep .item-value {
  font-size: 16px !important;
  margin-top: 0 !important; 
}

::ng-deep .advanced-pie-legend .legend-items-container .legend-items .legend-item {
  display: inherit !important;
}

HTML:

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

TS:

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { single } from './data';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  single: any[];
  view: any[] = [700, 400];

  // options
  showLegend: boolean = true;
  showLabels: boolean = true;

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

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

module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxChartsModule } from '@swimlane/ngx-charts';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ 
    BrowserModule, 
    FormsModule,
    NgxChartsModule,
    BrowserAnimationsModule 
],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

data to test:

export var single = [
  {
    "name": "this data is limited to 20 characters",
    "value": 8940000
  },
  {
    "name": "Whatever",
    "value": 5000000
  },
  {
    "name": "testing",
    "value": 7200000
  },
    {
    "name": "using charts",
    "value": 6200000
  }
];