Estoy usando ngx-charts para crear un gráfico en mi aplicación:

pero quiero mostrar información con más de 20 caracteres y la etiqueta del elemento está cortando la información:

Estoy usando stackblitz para probar:

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 }); } }

módulo:

 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 { }

datos a probar:

 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 } ];