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

Question

Charts are initiliazing with the Api fetch data in my project.Chart.js pie chart initiliaze with data when page is opened but bar chart is not. I need to click the legend labels.After that I can see the result. When I look at the console it gives the following error. I couldn't understand the problem.

error

    at parseVisibleItems (core.interaction.js:39)
    at getIntersectItems (core.interaction.js:55)
    at indexMode (core.interaction.js:117)
    at Chart.getElementsAtEventForMode (core.controller.js:643)
    at Chart.handleEvent (core.controller.js:863)
    at Chart.eventHandler (core.controller.js:821)
    at listener (core.controller.js:758)
    at HTMLCanvasElement.proxies.<computed> (platform.dom.js:410)
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.js:28664)

When page is opened

After I click the TL legend

component.ts

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) {}

  getTL(){
    this.service.getYearlyTLIncome().subscribe((result: Data[]) =>
    { result.forEach(x => { 
        this.dataLabel1.push(x.YIL);
        this.dataArrayTL.push(x.DOVIZLI);  
    });  
    });  
  }
  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,
                  },
                }
              ],
             
            },

          }
       });    
      });
  }

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

 

}

rosa · Accepted Answer · 2021-12-27 13:42:05Z

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();
  }

 

}

Please put specific details of answer rather than writing whole code.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related