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.