0

Estoy implementando Ngx-chart en un proyecto de angular version 7 y quería saber si es posible mover los labels que genera la grafica como la siguiente imagen:

introducir la descripción de la imagen aquí

La grafica genera varios labels entre ellos: total y porcentajes intente modificarlos con CSS pero no aplica los estilos

.advanced-pie-legend .total-value {
    font-size: 36px !important;
    position: left !important;
}

.advanced-pie-legend .legend-items-container .legend-items .legend-item .item-percent {
    font-size: 24px !important;
    position: rigth !important;
}

Este es el proyecto de angular que estoy utilizando

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

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
  gradient: boolean = true;
  showLegend: boolean = true;
  showLabels: boolean = true;
  isDoughnut: boolean = false;

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

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

  onSelect(data): void {
    console.log('Item clicked', JSON.parse(JSON.stringify(data)));
  }

  onActivate(data): void {
    console.log('Activate', JSON.parse(JSON.stringify(data)));
  }

  onDeactivate(data): void {
    console.log('Deactivate', JSON.parse(JSON.stringify(data)));
  }
}

No se si existirá alguna propiedad de la misma grafica para hacer eso

1 respuesta 1

0

Para que Angular acepte cambios en el css de algunas librerías como Angular material o el mismo ngx-charts, uno tiene que colocar encapsulation: ViewEncapsulation.None en el decorador del componente.

En tu caso sería algo así:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
 encapsulation: ViewEncapsulation.None
})

A mi me ha funcionando en muchos casos, espero que te sirva.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.