Using Charts In Your Ionic Framework Mobile App

I’m always trying to add more flair to the mobile applications that I develop whether it be through slick user interfaces or graphics.  For a while now I’ve wanted to mess around with charts in my mobile applications, but it kept getting pushed to my development back-burner.

I decided to push myself to give it a shot.  Using Ionic Framework to build mobile Android and iOS applications, you’re left with a few possibilities for adding charts because so many JavaScript libraries exist.  In particular, we’re going to take a look at Chart.js and the AngularJS wrapper, Angular Chart.  We’re going to look at this library because not only does it look great, but it plays nice with AngularJS which is what Ionic Framework is built upon.

Unlike some of my other tutorials, this one can be tested in both the web browser and device or simulator.  This is because we’re not going to be using any native plugins or libraries.  It will be all JavaScript and CSS.

Let’s start by creating a fresh Ionic Framework project on our desktop using the Command Prompt or Terminal:

It is important to note that if you’re not on a Mac, you cannot add and build for the iOS platform.

The next thing you want to do is download the JavaScript libraries for both Chart.js and Angular Charts.  Start by downloading the Chart.js library and adding Chart.min.js to your project’s www/js directory.  Next, download the Angular Charts library and add angular-charts.min.js to your project’s www/js directory and angular-charts.css to your project’s www/css directory.

As of right now, April 2016, Angular Chart only works with Chart.js 1.x.  I encourage you to read the support documentation to determine if this changes in the future.

The physical library files are included in your project, but they need to be added into your source code.

Open your project’s www/index.html file and make it look like the following:

Notice the highlighted lines above and their placement.  Since css/styles.css is your custom styles and overrides, the Angular Charts CSS file should be included above it.  The js/Chart.min.js file is the raw JavaScript file so it should be included before you try to include your js/angular-chart.min.js wrapper.

A lot of what comes next is just going to be taken from the Angular Charts and Chart.js official documentation.

Inside your project’s www/js/app.js file change the angular.module to include the Angular Charts wrapper like so:

Next, drop down lower into the file and create a new controller called ExampleController with the following code:

We’re going to use this same data for multiple chart types.  There are seven labels and seven data points to go with it.  There are multiple series which is why we have two data arrays, one for Series A and one for Series B.

Going back into the www/index.html file, find the <ion-content> tags and replace them with the following:

What is happening here?  We have two Ionic cards.  The first card has a line chart and the second card has a bar chart, both with some custom options as outlined in the Chart.js documentation.  In particular we are choosing to remove the tooltips because they can cause strange results on older versions of Android and iOS.

Ionic Chart iPad Ionic Chart iPhone

These charts are responsive which is great when working with various device screen resolutions.


There are various charting libraries in the wild, but here we saw the popular Chart.js library with the Angular Charts extension.  It is responsive, well documented, and works great with Ionic Framework.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Shivam01

    Now time to add new thing, Good one 🙂

  • backwardm

    Nic, I just wanted to say thanks for making these posts & videos. They are super well written & have helped me a lot. I look forward to each one.

  • adalberto Joco

    Nice share, thanks

  • sheriff

    HI, I tried but showing these error , i have two js files one is app.js for states and my controllers is in controller.js

    Error: [$injector:modulerr] Failed to instantiate module Mobileapp due to:
    [$injector:modulerr] Failed to instantiate module chart.js due to:
    [$injector:nomod] Module ‘chart.js’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.$injector/nomod?p0=chart.js
    Error: [$injector:modulerr]$injector/modulerr?p0=Mobileapp&

    • That error usually means you have a typo or you forgot to include the JavaScript library in your index.html file.


      • sheriff

        No i have added the js css file properly as per you blog, but i cant find out why its showing the chart

        • Put your full project on GitHub and I’ll take a look.


          • Mihir Patel

            hi there – i am also having the same issue – was this resolved?

  • Giancarlo Ventura Granados

    Great example, it works.
    Maybe you should replace, in the view, “data” with “chart-data”, “labels” with “chart-labels” and following, because they are deprecated and will be removed in a future version

  • Shashi R

    I have been using controller as vm syntax and angular-chart is not working with this approach. All I get is a blank chart. Also, I had chart.js instantiation issue when I got it from bower but worked fine when I used a cdn. I am working on splitting it from my project so I could post it.

  • Nurhadi

    hi Nic, great tutorial. in the next, how to show an option when user tap the chart. I want to show option for displaying chart in a week, a month or in a year. thanks..

    — sorry for my english

  • Hleb Paułowicz

    Hi, Nic! Thank you for the tutorial.
    It works in Chrome, but does not in iOS Safari (iPhone 5). Have you any ideas?

  • Momoo Dieng

    Nice tutorial like always, thanks.

  • jai

    HI, I tried but showing these error , i have two js files one is app.js for states and my controllers is in controller.js

    Error: [$injector:modulerr] Failed to instantiate module Mobileapp due to:
    [$injector:modulerr] Failed to instantiate module chart.js due to:
    [$injector:nomod] Module ‘chart.js’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.….
    Error: [$injector:modulerr]….

    hi do you find the solution for above issue

    • That error indicates you either have a typo in your code or you’ve forgotten to include the correct library.

      • sh_cheah

        Wow… That’s so unhelpful 😛

        • I’m sorry you feel I was unhelpful to you, but I am giving you help based on the information you provided me. That error generally means exactly what I stated. I’ve received it many times and in almost all scenarios it was because I had a typo, whether it was a stray bracket, an extra semi colon, etc.

          Might try passing your code through a linter if you’re not interested in searching for typos.


          • sh_cheah

            Your answer is as good as not answering what the person asked. The error message was very clear about the typo or forgot to include library, you don’t have to reiterate for the sake of answering.

          • As clear as it was, the user still posted it asking for help. I certainly could have ignored it, but I chose not to. I couldn’t have answered it in any other way because I base my answers on what is provided.

            I ask many questions elsewhere and just being responded to makes me feel better, even if it isn’t what I’m looking for. It means someone is listening.

            Please try to have a positive attitude on my blog.


  • Haze-Zeus

    Hello, thi sis a great intro/tutorial. I’m running into a problem with the Legend on the line chart though. the text “Series A” and “Series B” (and the color icons) are all squished together…Any idea why this may be happening?

    • Can you attach a screenshot to the comments?

  • chocobo123

    love your work. thanks so much.

  • Nikhil Kumar

    This chart, angular-chart.js is full of bugs and there is no solution for them, never user this guys. If you wanna to see how charts looks only use it for fun :/

  • sufiyan khan

    Hey Nic ,
    Implemented your code, works awesome as always.Is there a way to give these charts a custom css??.

    • Yea why not?

      I’d check out the official docs for the library.

  • X Jnr

    Hi, great tutorial! Is it possible to integrate this with firebase?

  • Brad Kirkwood

    Thanks for the tutorial Nic! This is exactly what I need for an app I’m working on at the moment. As an Ionic noob, your website has really inspired me to try more things. Thanks again!

    • No problem. Glad you found it useful and thanks for the compliment!

  • Dakshesh Patel

    how to show pie chart instead of line and bar chart type?

  • Prateesh

    Nic Thanks for the awesome tutorial. DO you know how can we get 2nd y axis and also toggle function like if I touch a series legend only that series is visible :)…thanks again

    • What do you mean second Y axis? Pretty sure you can only have 1 x and 1 y.

      • Prateesh

        Something like this

        • I don’t think that is possible with Angular Charts. You’d have to read the Chart.js documentation. Since it is a unique thing, it is out of my knowledge.


  • Timbo

    Hi, Nic. Great tutorial. I ran into a problem, though. As soon as I include ‘chart.js’ in this line: angular.module(‘starter’, [‘ionic’, ‘chart.js’]), my app will not load the controller.

  • Paul

    Hello Nic. Very nice tutorial, it’s clear and this library is really great! However, I implemented all the files needed, and I get this error in my console log and the chart isn’t drawn. Any idea ? Thank you!

    • I’m not familiar with that error unfortunately. I looked at the Angular Chart documentation found here:

      Including it in your project is still how I outlined in my tutorial. Are you sure you’ve included the library file in your project?

      • Paul

        Hi Nic, thank you for you answer. I copied the Chart.js file (from Chart.js github folder > Dist > Chart.js) and the angular-chart.js to my js project file. Do I need to include others files from the Chart.js project ?

        • What version of Chart.js are you using? I think Angular Chart only uses 1.x.

          • Paul

            You guessed right. Works well with 1.1.1 but not with the 2.x versions otherwise it throws this error. Looking forward to the next release of Angular Chart.. Thank you for your time!

          • I’ve updated the blog post to be specific in the versioning.


  • singhvipin

    Hi NIC ur posts are amazing .
    I am creating ionic app and I want to read SMS text and extract particular word from ….can u suggest the way to achieve

  • Ermal Feka

    Hello Nic
    I have a problem 🙁
    Can you help me ???

  • Ermal Feka

    I’m sorry. Error version Chart.min.js (Version: 2.1.3).
    For download version: 1.0.1

    You have an explanation for what the version 2 does not work?

    Thank you Nic 😉

    • Salvatore Cicciu

      thank you Ermal!

      • Ermal Feka


  • Sanketh T

    Hi Nic, nice tutorial, thanks for that. But I am getting only headings like Bar chart , Line chart in the output. Chart is not displaying. please help.

    • What do your logs say?

      • Sanketh T

        As I am a beginner to ionic I don’t know how to debug or how to analyze logs..

        • Pramod U

          Hi Both,

          I had a similar problem & replace the chart.js 2.x with Chart.js 1.1.1 & it worked for me.
          However there is one problem I facing the legends are not getting proper colour, could you please help with that.

      • Pramod U

        Hi Nic,

        I had a similar problem & replace the chart.js 2.x with Chart.js 1.1.1 & it worked for me.
        However there is one problem I facing the legends are not getting proper colour, could you please help with that.

  • ABA

    Hi Nic,
    I’d like to do something that seems very simple but I can’t figure out how to manage that…
    I want to draw several (about 10) concentric circles.
    The first inside circles are filled with color 1.
    The following circles are filled with color 2.
    and the last outside circles have no color.
    All the circles edges have to remain visible.

    I tried to use Chartjs Polar, and Radar, and Pie.
    But neither of them works correctly for my requirements.

    Do you have any advice??

    Thank you very much!

  • Mimi

    Hi Nick, I tried your example in Visual Studio 2015, but it appears always a picture without the diagram. What could be the problem here?

  • Girish

    Hi Nic,

    I am using this Chart.js and angular-chart.min.js from github. I have created and made changes as per your blog. I am getting attached error. I am also attaching my project structure image as well.

    Kindly advice what is missing

    Girish D. Fuluskar

  • Matteo

    i’ve got two blank ionic cards, i tried to use the Chart.min.js version 1.1.1 and still doesn’t work. I also can’t find the angular-charts.css file, could be this the problem? if yes where can i find it. thank you.

  • Hi Nic,
    Do you know about chart plugin suitable like concept below?

    • I’ve not seen any charting libraries like that, sorry

  • Suresh

    Hi Nic,
    Do you know of any chart library that can create a Stacked Waterfall chart on vertical axes. I tried checking for ChartJs but i couldn’t find a proper resource for this. Kindly let me know if you have came across any of this type..Thanks in Advance.

    • I’m sure one exists, but I do not know of one. Sorry,

  • Rodrigo Marchant

    The most common problems with this example (charts.js and ionic) emerge because versions are not compatible. The problem occurs when using chart.js versions 2.x or angular chart 1.0.x.
    Use Chart 1.1.x, angular-chart.js 0.10.x and angular-chart.css 0.10.x

    Find and use these files from github:
    Chart 1.1.x:

    angular-chart 0.9.x-0.10.x (.js and .css):

  • Ashok Srinivasan

    where can i get the angular-chart.css

  • Ashok Srinivasan

    i am having trouble in labels colour representation

  • Amalan Premkumar

    Hi great tutorial. I’m struggling to define the colors for my radar graph. Will you be able to help me out with it?

    • Probably should consult the Chart.js documentation for that one.

  • sonny

    data : 1,2,3,4,5,6,7
    label : jan,feb,mar,apr,mei,jun,jul

    Hello nick i just want ask if i want add data from my databases or my json
    how to call in chart ?
    i am use

    i run then show error like this
    Error: [$parse:syntax]$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bu.graph.harga%7D%7D&p4=%7Bu.graph.harga%7D%7D
    at ionic.bundle.min.js:37
    at q.throwError (ionic.bundle.min.js:240)
    at q.object (ionic.bundle.min.js:239)
    at q.primary (ionic.bundle.min.js:236)
    at q.unary (ionic.bundle.min.js:236)
    at q.multiplicative (ionic.bundle.min.js:235)
    at q.additive (ionic.bundle.min.js:235)
    at q.relational (ionic.bundle.min.js:235)
    at q.equality (ionic.bundle.min.js:234)
    at q.logicalAND (ionic.bundle.min.js:234)
    if i chage {{}} to “” it no error detected but not show the data

  • Vaibhaw Anand

    Hi Nic,
    I followed many examples provided by you. This i need example code for communicating with Flower monitor device fro ionic framework(v1).

  • Avaza Loop