NgChartsModule: The data for bar graph is not showing

Question

Since the ChartsModule cannot be imported to my app.module.ts I am trying to discover the ngchartmodule alone, it kinda works. But the data for the bar graph is not showing.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { NgxPrintModule } from 'ngx-print';
import { HeaderComponent } from './header/header.component';
import { PaymentComponent } from './payment/payment.component';
import { CustomerListComponent } from './customer-list/customer-list.component';
import { InvoiceComponent } from './invoice/invoice.component';
import { PurchaselistComponent } from './purchaselist/purchaselist.component';
import { ConfirmOrderComponent } from './confirm-order/confirm-order.component';
import { ReportsComponent } from './reports/reports.component';
import { NgChartsModule } from 'ng2-charts';

  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    Ng2SearchPipeModule,
    NgxPrintModule,
    FormsModule,
    NgChartsModule,
    // BrowserAnimationsModule
  ],

reports.component.ts

import { Component, OnInit } from '@angular/core';
import { ChartDataset, ChartType, ChartOptions } from 'chart.js';
import { PostService } from '../post.service';


@Component({
  selector: 'app-reports',
  templateUrl: './reports.component.html',
  styleUrls: ['./reports.component.css']
})
export class ReportsComponent implements OnInit {
  public barChartOptions: ChartOptions = {
    responsive: true,
  };
  // public barChartLabels: [] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [];

  public barChartData: ChartDataset[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
  ];

HTML:

 <div style="display: block;">
            <canvas baseChart 
              [datasets]="barChartData"
              
              [options]="barChartOptions"
              [plugins]="barChartPlugins"
              [legend]="barChartLegend"
              [type]="'bar'">
            </canvas>
          </div> 

Result:

IDK what is going on. I hope someone will help.

Reference for this bar graph: https://stackblitz.com/edit/ng2-charts-bar-template?file=src%2Fapp%2Fapp.component.html

Note: I was using angular 12 for this project

Answer 1

Just change the following things. In the reports.compononent.ts uncomment the labels and use

public barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];

then in the html add the labels like so

<canvas baseChart 
                  [datasets]="barChartData"
                  [labels]="barChartLabels"
                  [options]="barChartOptions"
                  [plugins]="barChartPlugins"
                  [legend]="barChartLegend"
                  [type]="'bar'">
                </canvas>

I think the library needs the labels and data to work properly. With this I got the following picture Result