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

by

1👍

✅

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

Leave a comment