Chartjs-Pie chart not working using angular and ng2-charts

by

0👍

Might not be the best solution, but you could try this:

<div style="width: 40%;" *ngIf="chartData">
 <canvas
   baseChart
   [chartType]="'pie'"
   [datasets]="chartData"
   [labels]="chartLabels"
   [options]="chartOptions"
   [legend]="true"
  </canvas>
</div>

0👍

At first need to make sure that the ng2-charts library and the Chart.js library is added as a dependency:

 npm install ng2-charts
 npm install chart.js

Make use of ng2-charts directives in our Angular application we need to make sure to add ChartsModule. Therefore first add the following import statement in app.module.ts:

app.module.ts

import { ChartsModule } from 'ng2-charts';
imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    ChartsModule
  ],

app.component.html

<div class="container-fluid">

  <div class="panel panel-body">
      <div class="row">
        <div class="col-md-12">
          <h4>Pie Chart</h4>
          <div style="display: block">
            <canvas baseChart
                    [data]="pieChartData"
                    [labels]="pieChartLabels"
                    [chartType]="pieChartType"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>

app.component.ts

import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
public pieChartOptions: ChartOptions = {
    responsive: true,
  };
  public pieChartLabels = ['Male', 'Female'];
  public pieChartData = [60, 40];
  public pieChartType = 'pie';
}

hope this will work for you

Leave a comment