Chartjs-ERROR TypeError: Cannot read properties of undefined (reading 'skip') Typescript/Api

by

0👍

I was creating a function in a ngOnit while I was calling data from Service.ts,it could not pull variables and the graph was blank when page is opened. In other words, it was throwing the data into the array, but when the page was refreshed for the second time, it was transferred datas to the chart. Instead of creating a function, I did the job of calling the data directly and bind the data to the graph at the same time.Thus, I have fixed the error of undefined properties.
I don’t know if it’s the right method but it solved my problem and I’m not getting any errors.

SOLUTION

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Data } from '@angular/router';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
import { SharedService } from '../../../@core/utils/shared.service';
import { Chart } from 'chart.js';  



@Component({
  selector: 'ngx-chartjs-bar-yearlyTL',
  template: `<canvas id="bartlcanvas"></canvas>`,
})
export class ChartjsYearBarComponent implements OnInit, OnDestroy {

  options: any;
  data: Data[];  
  dataArrayTL = [];  
  dataLabel1 = [];
  chart = [];
  themeSubscription: any;

  constructor(private service :SharedService,private theme: NbThemeService) {}

  
    ***this.service.getYearlyTLIncome().subscribe((result: Data[]) =>
    { result.forEach(x => { 
        this.dataLabel1.push(x.YIL);
        this.dataArrayTL.push(x.DOVIZLI);  
    });***  <<<<< here
    
  
  ngOnInit():void{
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

      const colors: any = config.variables;
      const chartjs: any = config.variables.chartjs;
    
         this.getTL();
        this.chart = new Chart('bartlcanvas',{
          type: 'bar',
          data: {
            labels: this.dataLabel1,
            datasets: [{
              data:this.dataArrayTL,
              label: 'TL',
              backgroundColor: NbColorHelper.hexToRgbA(colors.primaryLight, 0.8),
              borderColor: colors.info
            }],
          },
    
          options : {
            maintainAspectRatio: false,
            responsive: true,
            legend: {
              labels: {
                fontColor: chartjs.textColor,
              },
            },
            scales: {
              xAxes: [
                {
                  gridLines: {
                    display: true,
                    color: chartjs.axisLineColor,
                  },
                  ticks: {
                    fontColor: chartjs.textColor,
                  },
                },
              ],
              yAxes: [
                {
                  gridLines: {
                    display: true,
                    color: chartjs.axisLineColor,
                  },
                  ticks: {
                    fontColor: chartjs.textColor,
                  },
                }
              ],
             
            },

          }
       });    
      });
 ***});*** <<<<<< here 
  }

  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }

 

}

Leave a comment