Charts in Angular

In these article we discuss on how to implement charts in our angular application. For that we have used “ng2-charts” directives that uses of chart.js.
For that we need to install ng2-charts & module using below command.


//chart module
npm install ng2-charts --save
//save chart.js
npm install chart.js --save



We need to import “ChartsModule” in our app.module.ts file.


.................
//we need to import first ChartsModule
import {ChartsModule} from 'ng2-charts';
...................
@NgModule({
  .........
  imports: [
                ChartsModule,
            ...
           ]
})
export class AppModule(){}

It supports mainly 6 types of Charts called line, bar, radar, pie, polarArea, doughnut. All chats have mainly below Properties

Property Name Type Description
data Array<number[]> | number[] It set points on the chart, For line, bar and radar use Array<number[]> for other it uses number[]
labels Array X axis labels. It’s Needed for charts: line, bar and radar. Display labels on hover for charts: polarArea, pie and doughnut
datasets Array<{data: Array<number[]> | number[], label: string} data to set points in chart & the label for the dataset which appears in the legend and tooltips
chartType String Which type of chart want to draw. line, bar, radar, pie, polarArea, doughnut
colors Array If you specified then it display their or it will display randomly.
legend boolean=false Default it’s value is false. If you set true then it will display below the chart.

Let’s Start with Line chart First.
Basic example of the line chart full code display below also embedded full code.




import { Component } from '@angular/core';
 
@Component({
  selector: 'line-chart',
  templateUrl: './linechart.html'
})
export class LineChartComponent {
  // lineChart
  public lineChartData:Array = [
    {data: [50, 45, 82, 70, 35], label: 'Type P'},
    {data: [45, 55, 75, 65, 40], label: 'Type Q'}
  ];

  public lineChartLabels:Array = ['January', 'February', 'March', 'April', 'May'];

  public lineChartOptions:any = {
    responsive: true
  };

  public lineChartColors: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,0.8)'
    },
    { 
      backgroundColor: 'rgba(77,20,96,0.2)',
      borderColor: 'rgba(77,20,96,1)',
      pointBackgroundColor: 'rgba(77,20,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,20,96,1)'
    }
  ];
  public lineChartLegend:boolean = true;
  public lineChartType:string = 'line';
 
  public randomize():void {

    let _templineChartData:Array = new Array(this.lineChartData.length);
    for (let i = 0; i < this.lineChartData.length; i++) {
      _templineChartData[i] = {data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label};
      for (let j = 0; j < this.lineChartData[i].data.length; j++) {
        _templineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
      }
    }
    this.lineChartData = _templineChartData;
  }
 
  //chart clicked Event fire
  public chartClicked(e:any):void {
    console.log(e);
  }
 
  public chartHovered(e:any):void {
    console.log(e);
  }
}


<div class="row">
  <div class="col-md-6">
    <div style="display: block;">
    <canvas baseChart width="400" height="400"
                [datasets]="lineChartData"
                [labels]="lineChartLabels"
                [options]="lineChartOptions"
                [colors]="lineChartColors"
                [legend]="lineChartLegend"
                [chartType]="lineChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>
    </div>
  </div>
  <div class="col-md-6" style="margin-bottom: 10px">
    <table class="table table-responsive table-condensed">
      <tr>
        <th *ngFor="let label of lineChartLabels">{{label}}</th>
      </tr>
      <tr *ngFor="let d of lineChartData">
        <td *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</td>
      </tr>
    </table>
    <button class="btn btn-default" (click)="randomize()">CLICK</button>
  </div>
</div>


Next article we discuss on other types of charts. Please like and share.

Spread the love
  • 37
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •