CODEWITHSUNDEEP
angulartypescriptngx-charts
Sarjerao Ghadage
Sarjerao Ghadage

Reputation: 1544

Hide ngx advance pie charts legend

I want to hide the legend of ngx advanced pie chart and show image in the middle of the circle

Problem statement: Not able to hide the legend of advance pie chart

i want to hide legend and show image in rounded circle with data.

plnkr code

code:

//our root app component
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser-animations';
import {NgxChartsModule} from '@swimlane/ngx-charts';
import {single, multi} from '../data.ts';

@Component({
  selector: 'my-app',
  template: `
    <ngx-charts-advanced-pie-chart
      [view]="view"
      [scheme]="colorScheme"
      [results]="single"
      [gradient]="gradient"
      (select)="onSelect($event)">
    </ngx-charts-advanced-pie-chart>
  `
})
export class App {
  single: any[];
  multi: any[];

  view: any[] = [700, 400];

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

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

  onSelect(event) {
    console.log(event);
  }

}


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

Upvotes: 3

Views: 3831

Answers (3)

Srujan Gowda
Srujan Gowda

Reputation: 1

You can use this attribute

    <ngx-charts-pie-chart
      [legend]="false"
      [doughnut]="true"
   </ngx-charts-pie-chart>

Instead of ngx-charts-advanced-pie-chart you have to use pie-chart and use doughnut attribute to get advanced pie chart

Upvotes: 0

Amil Sajeev
Amil Sajeev

Reputation: 280

legend can be hide by adding following style in our style.css file

.advanced-pie-legend-wrapper{
   display: none !important;
}

Upvotes: 1

Michaela
Michaela

Reputation: 21

I do it is my css

  ngx-charts-advanced-pie-chart {
::ng-deep {
  .advanced-pie-legend-wrapper {
    display: none;
  }
}

}

Upvotes: 1

Related Questions