Angular + Ng2 Charts: Chart not displaying as Child Component

Question

I am trying to learn ng2-charts with Angular with the project currently I'm working on.

So basically, I tried out first with a fresh angular project, installed ng2-charts npm i ng2-charts chart.js

I'm trying to achieve it by passing the data to the child component. Now I'm wondering why my chart (child component) does not display anything.

The code goes like this.

Chart Component // sample-chart.component.ts

import { Component, Input, OnInit } from "@angular/core";

@Component({
  selector: "app-sample-chart",
  templateUrl: "./sample-chart.component.html",
  styleUrls: ["./sample-chart.component.css"],
})
export class SampleChartComponent implements OnInit {
  @Input() barChartData;
  @Input() barChartLabels;
  @Input() barChartOptions;
  @Input() barChartPlugins;
  @Input() barChartLegend;
  @Input() barChartType;

  constructor() {}

  ngOnInit() {
    console.log(this.barChartData, "data");
  }
}

Chart Component // sample-chart.component.html

<canvas
  baseChart
  [datasets]="barChartData"
  [labels]="barChartLabels"
  [options]="barChartOptions"
  [plugins]="barChartPlugins"
  [legend]="barChartLegend"
  [chartType]="barChartType"
>
</canvas>

App Component // .ts file

import { Component } from "@angular/core";
import { ChartOptions, ChartType, ChartDataSets } from "chart.js";
import { Label } from "ng2-charts";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "app";

  public barChartOptions: ChartOptions = {
    responsive: true,
    // 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 barChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: "Series A" },
    { data: [28, 48, 40, 19, 86, 27, 90], label: "Series B" },
  ];
}

App Component // .html file

<div style="text-align: center">
  <h1>Welcome to {{ title }}!</h1>

  <div style="display: block">
    <app-sample-chart
      [barChartData]="barChartData"
      [barChartLabels]="barChartLabels"
      [barChartOptions]="barChartOptions"
      [barChartPlugins]="barChartPlugins"
      [barChartLegend]="barChartLegend"
      [barChartType]="barChartType"
    >
    </app-sample-chart>
  </div>

  <!-- <router-outlet></router-outlet> -->
</div>

Here is the version used if it's relevant.

Chart & ng2-charts version used

"@angular/core": "^6.0.3",
"chart.js": "^2.9.4",
"ng2-charts": "^2.4.2",

Am I doing something wrong? Any suggestions?

If not then can you please check ChartsModule is imported in app.module.ts? — Aman Gojariya
@AmanGojariya, yes no error displayed. Am getting the data passed as @Input(). — Marc Francisco
Please remove display block div into app.component and add in chart component.html — Aman Gojariya
I have posted the answer. Please mark is right if it's working for you — Aman Gojariya

Aman Gojariya Aman Gojariya · Accepted Answer · 2021-03-17T18:19:06

Can you please try with below code?

sample-chart.component.html

<div style="display: block;">
   <canvas
     baseChart
     [datasets]="barChartData"
     [labels]="barChartLabels"
     [options]="barChartOptions"
     [plugins]="barChartPlugins"
     [legend]="barChartLegend"
     [chartType]="barChartType"
   >
   </canvas>
</div>

You are forgot to add display block div. Can you please try with this in your chart.component.html

Angular + Ng2 Charts: Chart not displaying as Child Component

1 Answers