Over a million developers have joined DZone.

Using Charts in Your Ionic Framework Mobile App

This tutorial demonstrates building charts for your mobile app using AngularJS and the Ionic Framework.

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

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:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

Create New Ionic Android And iOS Project Shell 1 2 3 4 ionic start IonicProject blank cd IonicProject ionic platform add android ionic platform add ios

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 latest Chart.js library and adding Chart.min.js to your project’s www/js directory.  Next, download the latest 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.

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:

<!DOCTYPE html>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link rel="stylesheet" href="css/angular-chart.css">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>

        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/Chart.min.js"></script>
        <script src="js/angular-chart.min.js"></script>
        <script src="js/app.js"></script>
    <body ng-app="starter">
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>

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:

angular.module('starter', ['ionic', 'chart.js'])

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

.controller("ExampleController", function($scope) {

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series A', 'Series B'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]


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:

<ion-content ng-controller="ExampleController">
    <div class="card">
        <div class="item item-divider">
            A line chart
        <div class="item item-text-wrap">
            <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
    <div class="card">
        <div class="item item-divider">
            A bar chart
        <div class="item item-text-wrap">
            <canvas id="bar" class="chart chart-bar" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>

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.

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.


Published at DZone with permission of Nic Raboy, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}