Bar & Pie Chart in Angular

In my last article we discuss on how to implement line chart in angular.In these article we discuss on how to implement Bar & Pie chart in our angular Application.

Bar Chart
A bar chart is a chart that presents categorical data with rectangular bars with heights or lengths proportional to the values that they represent


Basic example of the bar chart full code display below also embedded full code.


import { Component } from '@angular/core';
 
@Component({
  selector: 'barchart',
  templateUrl: './barchart.html'
})
export class BarChartComponent {
  
  public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true
  };

    public mbarChartLabels:string[] = ['2012', '2013', '2014', '2015', '2016', '2017', '2018'];
    public barChartType:string = 'bar';
    public barChartLegend:boolean = true;
  
    public barChartColors:Array = [
    {
      backgroundColor: 'rgba(105,159,177,0.2)',
      borderColor: 'rgba(105,159,177,1)',
      pointBackgroundColor: 'rgba(105,159,177,1)',
      pointBorderColor: '#fafafa',
      pointHoverBackgroundColor: '#fafafa',
      pointHoverBorderColor: 'rgba(105,159,177)'
    },
    { 
      backgroundColor: 'rgba(77,20,96,0.3)',
      borderColor: 'rgba(77,20,96,1)',
      pointBackgroundColor: 'rgba(77,20,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,20,96,1)'
    }
  ];
    public barChartData:any[] = [
      {data: [55, 60, 75, 82, 56, 62, 80], label: 'Company A'},
      {data: [58, 55, 60, 79, 66, 57, 90], label: 'Company B'}
    ];
  
    // events
    public chartClicked(e:any):void {
      console.log(e);
    }
  
    public chartHovered(e:any):void {
      console.log(e);
    }
  
    public randomize():void {
      let data = [
        Math.round(Math.random() * 100),
        Math.round(Math.random() * 100),
        Math.round(Math.random() * 100),
        Math.round(Math.random() * 100),
        Math.round(Math.random() * 100),
        Math.round(Math.random() * 100),
        Math.round(Math.random() * 100)];
      let clone = JSON.parse(JSON.stringify(this.barChartData));
      clone[0].data = data;
      this.barChartData = clone;
    }
}


<h4 style="text-align:center"> Bar chart of Company A&B
  <br/><br/>
    <button (click)="randomize()" class="btn btn-primary">Change Data</button>

  </h4><br/>
<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="mbarChartLabels"
            [options]="barChartOptions"
            [colors]="barChartColors"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>


</div>

Pie Chart
A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion of the data.


Basic example of the pie chart full code display below also embedded full code.


import { Component } from '@angular/core';
 
@Component({
  selector: 'piechart',
  templateUrl: './piechart.html'
})
export class PieChartComponent {
  // Pie
  public pieChartLabels:string[] = ['Chrome', 'Safari', 'Firefox','Internet Explorer','Other'];
  public pieChartData:number[] = [40, 20, 20 , 10,10];
  public pieChartType:string = 'pie';
 
  // events
  public chartClicked(e:any):void {
    console.log(e);
  }
 
  public chartHovered(e:any):void {
    console.log(e);
  }
}


<h4 style="text-align:center">Pie Chart For Browser usage of &nbsp; Eduforbetterment.com
  </h4>

<div style="display: block">
  <canvas baseChart
          [data]="pieChartData"
          [labels]="pieChartLabels"
          [chartType]="pieChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
</div>


Next article we discuss on polarArea & doughnut chart. Please like and share articles.

Spread the love
  • 39
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •