CODEWITHSUNDEEP
angulartypescriptng2-charts
VicSan
VicSan

Reputation: 119

Angular 8: Drawing two bar-charts in ng2-charts not working with different data sets

I was trying to draw two charts on the same page using the code below in the HTTP

<div class="chk-block-content">
    <canvas height="100"width="500" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType"></canvas>

</div>

 <div class="chk-block-content">
    <canvas height="100"width="500" baseChart [datasets]="barChartData2" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="bar"></canvas>
</div>

in two diferent blocks , however the only data set that is drawn in the screen is the barChartData one.I have defined them like this in my component ts 

 public barChartdata2: any[]=[
      {data: [10], label: 'Series A'},
      {data: [10], label: 'Series B'}
   ]
   public barChartLabels:string[] = [ 'Enero', 


 'Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
   public barChartType:string = 'bar';
   public barChartLegend:boolean = false;
   public barChartData:any[] = [
     {data: [6500, 590, 800, 810, 560, 550, 400], label: 'Series A'},
     {data: [2800, 480, 400, 190, 860, 207, 900], label: 'Series B'}
   ];

Why does barChartData only get drawn?

Is there a way for me to visualize both datasets?

Upvotes: 0

Views: 1734

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15031

A few things:

  • in your TS file, the variable name is barChartdata2, while the variable referred to in the 2nd chart is barChartData2 (capital D)
  • the chart type of bar in your HTML should be barChartType

relevant HTML:

<div class="chk-block-content">
    <canvas height="100"width="500" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType"></canvas>
</div>

 <div class="chk-block-content">
    <canvas height="100"width="500" baseChart [datasets]="barChartData2" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType"></canvas>
</div>

relevant TS file:

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
public barChartData2: any[]=[
      {data: [10], label: 'Series A'},
      {data: [10], label: 'Series B'}
  /*
     {data: [6500, 590, 800, 810, 560, 550, 400], label: 'Series A'},
     {data: [2800, 480, 400, 190, 860, 207, 900], label: 'Series B'}
   */
   ];
   public barChartLabels:string[] = [ 'Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
   public barChartType:string = 'bar';
   public barChartLegend:boolean = false;
   public barChartData:any[] = [
     {data: [6500, 590, 800, 810, 560, 550, 400], label: 'Series A'},
     {data: [2800, 480, 400, 190, 860, 207, 900], label: 'Series B'}
   ];
  constructor() {  }
  ngOnInit() {}
}

working stackblitz here

Upvotes: 1

Related Questions