Angular 13- Ngx-swimlane Charts

 Create a new angular application using the following command 

ng new ngx-charts-demo

Install ngx-charts package in an angular application using the following command.

npm install @swimlane/ngx-charts --save

At the time of installation if you get the following error

ERROR in The target entry-point "@swimlane/ngx-charts" has missing dependencies:

 - @angular/cdk/portal

we need to add @angular/cdk using the following

npm install @angular/cdk --save

Import NgxChartsModule from 'ngx-charts' in AppModule.  -- only in App module, not in the feature module

ngx-charts also required the BrowserAnimationsModule. Import it in AppModule.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

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

import { NgxChartsModule }from '@swimlane/ngx-charts';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    NgxChartsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  saleData = [

    { name: "Mobiles", value: 105000 },

    { name: "Laptop", value: 55000 },

    { name: "AC", value: 15000 },

    { name: "Headset", value: 150000 },

    { name: "Fridge", value: 20000 }

  ];

}

<ngx-charts-pie-chart 

    [results]="saleData"

    [legend]="true"

    [legendTitle]="'Product Sale Report'" 

    [view]="[1000,300]"

    [labels]="true" >

</ngx-charts-pie-chart>

<!--<ngx-charts-bar-vertical 

    [view]="[1000,400]"

    [results]="saleData"

    [xAxisLabel]="'Products'"

    [legendTitle]="'Product Sale Chart'"

    [yAxisLabel]="'Sale'"

    [legend]="true"

    [showXAxisLabel]="true"

    [showYAxisLabel]="true"

    [xAxis]="true"

    [yAxis]="true"

    [gradient]="true">

</ngx-charts-bar-vertical>-->

<!--<ngx-charts-pie-chart 

    [results]="saleData"

    [legend]="true"

    [legendTitle]="'Product Sale Report'" 

    [view]="[1000,300]"

    [labels]="true" >

</ngx-charts-pie-chart>-->

<ngx-charts-advanced-pie-chart 

      [view]="[1000,400]"

      [results]="saleData"

      [gradient]="true" >

</ngx-charts-advanced-pie-chart>