Angular 2 Charts

Angular 2 Charts are a set of dynamic graphs, Dashboards are build with Charts. To present statistics and data effectively we need Charts.

angular 2 charts
angular 2 charts

Angular 2 charts can enhance the visual of your application.

A set of charts are available e.g.: Line Chart, Bar Chart, Radar Chart, Pie Chart, and morePolar Area chart, Doughnut chart.

try angular 2 charts
try angular 2 charts

live example at the end of the article :

angular 2 charts example
angular 2 charts example

Include bootstrap before we start (it’s easy : ) )

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/x.x.x/css/bootstrap.min.css” rel=”stylesheet”>

Let’s build an Angular 2 chart example.

  • First of all we need to install ng2-charts :

npm i ng2-charts –save

  • js component installation :

npm install chart.js –save

  • embed the code into the project.

<script src=”node_modules/chart.js/Chart.min.js”></script>

Main app code source : html File angular-2-charts.html

<div class="row">
<h2>Angular 2 Charts - Line Example</h2>
</div>
<div class="row">
<div class="col-md-6">
<base-chart class="chart"
[data]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[series]="lineChartSeries"
[colours]="lineChartColours"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</base-chart>
</div> 
</div>

Main app code source : Typescript File

import{Component}from'angular2/core';
import{CORE_DIRECTIVES,FORM_DIRECTIVES,NgClass}from'angular2/common';

import{CHART_DIRECTIVES}from'../../../ng2-charts';

//webpackhtmlimports
lettemplate=require('./angular-2-charts.html');

@Component({
selector:'line-chart-demo',
template:template,
directives:[CHART_DIRECTIVES,NgClass,CORE_DIRECTIVES,FORM_DIRECTIVES]
})
exportclassLineChartDemo{

constructor(){
console.log('linedemo');
}

//lineChart
privatelineChartData:Array<any>=[
[645,555,820,561,536,156,245],
[528,586,560,129,265,145,478],
[618,458,665,969,452,655,269]
];
privatelineChartLabels:Array<any>=['A','February','March','April','May','June','July'];
privatelineChartSeries:Array<any>=['BMWSerie1','BMWSerie2','BMWSerie3'];
privatelineChartOptions:any={
animation:false,
responsive:true,
multiTooltipTemplate:'<{28eefed8cb8bfa9e2bbcfc2b6e9ab5ce72afab532b878349fead02da0ca94fca}if(datasetLabel){{28eefed8cb8bfa9e2bbcfc2b6e9ab5ce72afab532b878349fead02da0ca94fca}><{28eefed8cb8bfa9e2bbcfc2b6e9ab5ce72afab532b878349fead02da0ca94fca}=datasetLabel{28eefed8cb8bfa9e2bbcfc2b6e9ab5ce72afab532b878349fead02da0ca94fca}>:<{28eefed8cb8bfa9e2bbcfc2b6e9ab5ce72afab532b878349fead02da0ca94fca}}{28eefed8cb8bfa9e2bbcfc2b6e9ab5ce72afab532b878349fead02da0ca94fca}><{28eefed8cb8bfa9e2bbcfc2b6e9ab5ce72afab532b878349fead02da0ca94fca}=value{28eefed8cb8bfa9e2bbcfc2b6e9ab5ce72afab532b878349fead02da0ca94fca}>'
};
privatelineChartColours:Array<any>=[
{//grey
fillColor:'rgba(148,159,177,0.2)',
strokeColor:'rgba(148,159,177,1)',
pointColor:'rgba(148,159,177,1)',
pointStrokeColor:'#fff',
pointHighlightFill:'#fff',
pointHighlightStroke:'rgba(148,159,177,0.8)'
},
{//darkgrey
fillColor:'rgba(77,83,96,0.2)',
strokeColor:'rgba(77,83,96,1)',
pointColor:'rgba(77,83,96,1)',
pointStrokeColor:'#fff',
pointHighlightFill:'#fff',
pointHighlightStroke:'rgba(77,83,96,1)'
},
{//grey
fillColor:'rgba(148,159,177,0.2)',
strokeColor:'rgba(148,159,177,1)',
pointColor:'rgba(148,159,177,1)',
pointStrokeColor:'#fff',
pointHighlightFill:'#fff',
pointHighlightStroke:'rgba(148,159,177,0.8)'
}
];
privatelineChartLegend:boolean=true;
privatelineChartType:string='Line';

privaterandomize(){
let_lineChartData:Array<any>=[];
for(leti=0;i<this.lineChartData.length;i++){
_lineChartData[i]=[];
for(letj=0;j<this.lineChartData[i].length;j++){
_lineChartData[i].push(Math.floor((Math.random()*100)+1));

}
}
this.lineChartData=_lineChartData;
}

//events
chartClicked(e:any){
console.log(e);
}

chartHovered(e:any){
console.log(e);
}

}

angular 2 charts component is very useful.

our example uses typescript as programming language.

all files from here: angular 2 charts

angular 2 charts