[Chartjs]-Chart.js ng2-charts colors in pie chart not showing

by

15👍

✅

Try something like the following …

public pieChartColors: Array < any > = [{
   backgroundColor: ['red', 'yellow', 'rgba(148,159,177,0.2)'],
   borderColor: ['rgba(135,206,250,1)', 'rgba(106,90,205,1)', 'rgba(148,159,177,1)']
}];
...

not a ‘ng2-charts’ pro, but afaik this should work.

6👍

Solved this problem by adding *ngIf="pieChartLabels && pieChartData" condition in the HTML template:

<div class="card">
    <div class="card-header">
        Pie Chart
    </div>
    <div class="card-body">
        <div class="chart-wrapper" *ngIf="pieChartLabels && pieChartData">
            <canvas baseChart class="chart"
                [data]="pieChartData"
                [labels]="pieChartLabels"
                [chartType]="pieChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)">
            </canvas>
        </div>
    </div>
</div>

1👍

I agree with above answer, I would like to provide details if someone needs it. my example is in PIE chart it works for others too.

Step-1:

Add the following in your component.ts file

    public pieChartOptions: ChartOptions = {
 responsive: true,
 };

 public pieChartLabels: Label[] = [['Not', 'Completed'], ['Completed', 'Tasks'], 'Pending Tasks'];
 public pieChartData: SingleDataSet = [300, 500, 100];
 public pieChartType: ChartType = 'pie';
 public pieChartLegend = true;
 public pieChartPlugins = [];

 public pieChartColors: Array < any > = [{
   backgroundColor: ['#fc5858', '#19d863', '#fdf57d'],
   borderColor: ['rgba(252, 235, 89, 0.2)', 'rgba(77, 152, 202, 0.2)', 'rgba(241, 107, 119, 0.2)']
 }];


 chartClicked(e){
   console.log(e);
   console.log('=========Chart clicked============');
 }
 chartHovered(e){
  console.log(e);
  console.log('=========Chart hovered============');
 }

Step-2 :

Your component.html should look something like below:

   <canvas baseChart 
            [data]="pieChartData" 
            [labels]="pieChartLabels" 
            [chartType]="pieChartType"
            [options]="pieChartOptions"
            [plugins]="pieChartPlugins"
            [legend]="pieChartLegend"
            [colors]="pieChartColors"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"
            >
          </canvas>

0👍

HTML:

<canvas baseChart width="200" height="200"
        [data]="chartData"
        [options]="chartOptions"
        [type]="chartType">
</canvas>



TS:




import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartConfiguration, ChartData, ChartType } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';

export class MyChartComponent implements OnInit {

  @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;

  constructor() { }

  ngOnInit(): void {}

  public chartOptions: ChartConfiguration['options'] = {
    responsive: true,
    plugins: {
      legend: {
        display: true,
        position: 'top',
      },
    },
  };

  public chartData: ChartData<'pie', number[], string | string[]> = {
    labels: ['Low', 'Middle', 'High'],
    datasets: [{
      data: [25, 40, 35], 
      backgroundColor: ['rgba(0, 160, 0, 1)', 'rgba(240, 160, 0, 1)', 'rgba(220, 0, 0, 1)'],
      borderColor: ['rgba(250, 250, 250, 1)', 'rgba(250, 250, 250, 1)', 'rgba(250, 250, 250, 1)'],
      hoverBackgroundColor: ['rgba(0, 160, 0, 0.8)', 'rgba(240, 160, 0, 0.8)', 'rgba(220, 0, 0, 0.8)'],
      hoverBorderColor: ['rgba(0, 160, 0, 1)', 'rgba(240, 160, 0, 1)', 'rgba(220, 0, 0, 1)'],
    }],
  };

  public chartType: ChartType = 'pie';
}





And change these colors to your own ones.

Leave a comment