[Solved]-Angular / ng2-charts: Fetching json data in chart object showing: Cannot read property 'length' of undefined-Chart.js

when i tried to replicate your code, i got the same issue that legends had a strike through them... the reason was the format of the piechartdata:any object and the data [2193,3635,8417,0] which was being fed into it!!

you had defined piechartdata as an array with single object with a data property which consisted of an array.

piechartdata:any = [ { data: [] } ];

while, the values were being set as a number array [2193,3635,8417,0], which means:

piechartdata:any = [];

to replicate the delay caused by your http call...i used settimeout and got the form working as intended...

relevant ts:

import { component } from '@angular/core';
import { charttype, chartoptions } from 'chart.js';
import { label } from 'ng2-charts';
import * as plugindatalabels from 'chartjs-plugin-datalabels';

@component({
  selector: 'my-app',
  templateurl: './app.component.html',
  styleurls: ['./app.component.css']
})
export class appcomponent {
  name = 'angular';
  somedata: any[] = [];

  public piechartoptions: chartoptions = {
    responsive: true,
    legend: {
      position: 'top',
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          const label = ctx.chart.data.labels[ctx.dataindex];
          return label;
        },
      },
    }
  };
  public piechartlabels: label[] = ['pending', 'success', 'fail', 'created'];
  public piecharttype: charttype = 'pie';
  public piechartlegend = true;
  public piechartplugins = [plugindatalabels];
  public piechartcolors = [
    {
      backgroundcolor: ['rgba(30, 169, 224, 0.8)',
        'rgba(255,165,0,0.9)',
        'rgba(139, 136, 136, 0.9)',
        'rgba(255, 161, 181, 0.9)',
      ]
    },
  ];
  //public piechartdata: number[] = [2193,3635,8417,0];
  public piechartdata: number[] = [];

  constructor() { }

  ngoninit() {
    settimeout(() => {
      this.somedata = [300, 500, 100];
      this.piechartdata = this.somedata;
    }, 5000);
  }

}

relevant html:

<hello name="{{ name }}"></hello>

<div *ngif='this.somedata.length <=0'>
  please wait while the latest data is fetched
</div>

<div *ngif='this.somedata.length >0'>
  we got data: {{this.somedata.length}}

<div class="chart">
      <canvas basechart
        [data]="piechartdata"
        [labels]="piechartlabels"
        [charttype]="piecharttype"
        [options]="piechartoptions"
        [plugins]="piechartplugins"
        [colors]="piechartcolors"
        [legend]="piechartlegend">
      </canvas>
    </div>
</div>

working stackblitz available here