CODEWITHSUNDEEP
angularchart.jsng2-charts
Marc Francisco
Marc Francisco

Reputation: 43

Angular + Ng2 Charts: Chart not displaying as Child Component

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.

Empty Page

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?

Upvotes: 0

Views: 1378

Answers (1)

Aman Gojariya
Aman Gojariya

Reputation: 1429

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

Upvotes: 3

Related Questions