How I used Frappe charts with Ionic

While I was checking my daily email newsletters, I stumbled upon this beautiful new chart library called Frappe charts.

Since I’m working on a project using Ionic and needed to present the data with graphs, I decided to integrate Frappe chart and use it as a custom component. The good thing about this chart library is that it is so simple and has no (as in zero) dependencies!

Here’s how I did it, lets start by creating a new Ionic project.

Install Frappe charts to the project.

Create a new component.

Now that we have generated our component files, it’s time to customize it.

Open /components/frappe-charts/frappe-charts.ts and put the below codes. We will also import the Frappe chart library here.

I won’t go in to details and explain how the code works because I think it is fairly straight-forward. If you want to know how Angular component works, please check this documentation from the Angular website.

Okay, now open /components/frappe-charts/frappe-charts.html and put this code

We have to import the styles as well in /src/app/app.scss

Lastly, import the component’s module to /src/app/app.module.ts. Also, make sure that your app is configured to use the lazy loading feature!

Horay! We can now use our component to any page that we want.

So if we wanted to use it in our home page /src/pages/home/home.ts, we just need to provide the data:

We should import the Component Module in home page module as well.

Then use the component in /src/pages/home/home.html like:

That’s it!

I really enjoyed playing with this wonderful Frappe chart library and I hope you’ll find this somehow useful!

This is the first time I tried to integrate a third party library to an Ionic project, so please let me know in the comment section below if you have a better or more efficient way of doing this stuff!



Credits to Frappe for this amazing chart library!