Frappé Charts with Angular

Few days ago, I exploring github and found this awesome chart called Frappé Charts. It’s simple with zero dependencies. It’s so simple I fall in love at first sight.

I am currently working with Angular (by Angular I mean the new Angular not 1.x). I was(am) excited about React but after 3 month working with Angular, I have to say, it’s not bad at all. Typescript is also really cool. It doesn't feels like CoffeeScript or Dart.

So, I tried to integrate Frappé Charts with Angular(v5). Angular have issues sometime integrating other library (I still have to solve the issues that I got while tried to add sweetalert into it). I able to add Frappé Charts into Angular without much pain. I also opened an issue which was resolved when 0.0.4 version released. So, lets start step by step.

Start a new angular project with angular-cli.

ng new ng-frappe-charts

Install Frappé Charts into the project.

npm install frappe-charts

Add frappe-chart js file into the script section of .angular-cli.json

scripts: [
  "../node_modules/frappe-charts/dist/frappe-charts.min.iife.js"
]

Created a Directive with the angular-cli(command below). We will use this directive to add Frappé Charts into our html.

ng g directive frappe

Add the FrappeDirective into the Module. I added into AppModule in the demo. But its not required to add there as you wouldn't required chart through out the app . You can add only in the required module.

import { FrappeDirective } from ‘./frappe.directive’;
@NgModule({  
  imports: [BrowserModule, FormsModule],  
  declarations: [AppComponent, FrappeDirective],  
  bootstrap: [AppComponent]
})

Now, its time to use it. I added into app.component.html

<div appFrappe 
     [title]=”’Bar Chart’” 
     [data]=”dataSet” 
     [type]=”’bar’”>
</div>

Voilà

Repo: https://github.com/iamkdev/ng-frappe-charts

Demo: https://ng-frappe-charts.stackblitz.io

Note: There are lots more to do. I will try to make it as an angular library and publish into npm soon.