dynamic pie chart component - How to add pie-chart in angular 6 and Asp Net Core Application

import { BookstoreService } from './../../services/bookstore.service';
import { Component, OnInit, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css'],
  providers: [BookstoreService]
})
export class PieChartComponent implements OnInit {

  books: any[] = [];
  valueData: number[] = [];
  labelData: any[] = [];

  constructor(private _bookstoreService: BookstoreService) {
    this.dataVal();
  }

  dataVal() {
    this._bookstoreService.getBookStoreGroup()
      .subscribe(books => {
        this.books = books;
        let i = 0;
        let j = 0;
        for (i = 0; i < this.books.length; i++) {
          this.labelData.push(this.books[i][j].publisherName.publisherName.toString());
          this.valueData.push(this.books[i].length);
        }
      });
  }

  data = {
    labels: [this.labelData],
    datasets: [{
      data: this.valueData,
      backgroundColor: [
        "#00FFFF",
        "#E0FFFF",
        "#00FFFF",
      ]
    }]
  }
  ngOnInit() {
  }
}