CODEWITHSUNDEEP
angulartypescriptchartschart.jsbar-chart
kjamp
kjamp

Reputation: 367

ng2-charts not showing charts in Angular 10

I'm trying to add charts to my application but for some reason my charts aren't loading.

In the DOM I can see the element being made but I see it being set to ==$0 which I'm not understanding.

I am using Angular Material but that shouldn't have an effect on the chart showing in my opinion.

So I am unable to see the chart at all. What am I doing wrong?

charts.component.html

  <div>
      <div>
        <div style="display: block">
          <canvas baseChart
          width="800" height="400"
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [plugins]="barChartPlugins"
            [legend]="barChartLegend"
            [chartType]="barChartType">
          </canvas>
        </div>
        <button mat-button mat-raised-button color="primary" (click)="randomize()">Update</button>
      </div>
    </div>

charts.component.ts

    import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import * as pluginDataLabels from 'chartjs-plugin-datalabels';
import 'chartjs-plugin-datalabels'
import { Label } from 'ng2-charts';

@Component({
  selector: 'app-charts',
  templateUrl: './charts.component.html',
  styleUrls: ['./charts.component.scss']
})

export class ChartsComponent implements OnInit {
  public barChartOptions: ChartOptions = {
    responsive: false,
    // We use these empty structures as placeholders for dynamic theming.
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
      }
    }
  };
  public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [pluginDataLabels];

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

  constructor() { }

  ngOnInit() {
  }

  // events
  public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
    console.log(event, active);
  }

  public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
    console.log(event, active);
  }

  public randomize(): void {
    // Only Change 3 values
    const data = [
      Math.round(Math.random() * 100),
      59,
      80,
      (Math.random() * 100),
      56,
      (Math.random() * 100),
      40];
    this.barChartData[0].data = data;
  }
}

Upvotes: 0

Views: 3162

Answers (1)

SaiSurya
SaiSurya

Reputation: 1116

I think it is compatibility issue you can try ng-chartjs package instead of ng2-chartjs.
ng-chart.js
Or else you can try updating the existing package.

Upvotes: 2

Related Questions