NgxD3Charts

This library was generated with Angular CLI version 11.0.5.

Install NgxTabGroup

npm i ngx-d3-charts

Description

ngx-d3-charts has DoughnutChart with wide range of legend select option (POLYLINES, BOTTOM, SIDE) with auto color selection. Also have onhover expend animation.

Use of NgxD3Charts

First impornt NgxD3ChartsModule in the root module(AppModule):

import { NgxD3ChartsModule } from 'ngx-d3-charts';

@NgModule({
  imports: [
    // ...
    NgxD3ChartsModule
  ],
})
export class AppModule {}

In your app.component.ts :

import { ChartData } from 'ngx-d3-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
   data: ChartData[] = [
    { label: 'Water', value: 20 },
    { label: 'Land', value: 20 },
    { label: 'Sand', value: 25 },
    { label: 'Grass', value: 10 },
    { label: 'Earth', value: 5 },
    { label: 'Air', value: 9 },
    {label: 'Tree',value: 11}
  ];
}

How to use in your app.component.html.

<ngx-doughnut-chart [data]="data" [height]="570" [width]="750" legendType="BOTTOM"></ngx-doughnut-chart>