Adding Responsive Charts & Graphs to Ionic 2 Applications

  • We use ViewChild to grab a reference to the local variable we attached to the canvas in the template, and then we supply that element to new Chart when we are creating a chart.
  • Getting charts set up in your Ionic 2 applications with Chart.js only takes a matter of minutes, but it is also an in-depth library with plenty of advanced customisations.
  • The bar chart should be displayed in your application now.
  • All we have to do is supply Chart with an object that defines the type of chart we want, and the type of data we want to display.
  • These both use exactly the same method as we used for the bar chart, except that we supply a different configuration in the object that we supply.

I encourage people who are subscribed to my email list to send me suggestions for tutorials they would like to see, and one of the most frequent requests I

@seacloud9: Adding Responsive Charts & Graphs to #ionic 2 Applications #angularjs

I encourage people who are subscribed to my email list to send me suggestions for tutorials they would like to see, and one of the most frequent requests I receive is a for a tutorial on how to add charts to an Ionic 2 application. Adding charts to applications is certainly no new problem – many libraries exist to handle creating them, so there’s no need for us to reinvent the wheel. With so many options available, however, we need to choose a library that is going to work well in the Ionic 2 ecosystem.

element to display graphs, which is perfect for an HTML5 mobile application. The charts are super simple to set up, they look beautiful, and they are responsive by default – so they easily scale with your application as you change between devices or screen orientation.

This is going to be a very quick tutorial that will run through setting up Chart.js in an Ionic 2 application and creating a few difference types of graphs. Here’s what it will look like when we’re done:

Before you go through this tutorial, you should have at least a basic understanding of Ionic 2 concepts and the differences to Ionic 1. You must also already have Ionic 2 installed on your machine.

If you’re not familiar with Ionic 2 already, I’d recommend reading my Ionic 2 Beginners Guide first to get up and running and understand the basic concepts. If you want a much more detailed guide for learning Ionic 2, then take a look at Building Mobile Apps with Ionic 2.

We are going to start off by generating a new Ionic 2 application with the following command:

Once that has finished generating, you should make it your current working directory by running the following command:

. Just run the following command:

Now you can use Chart.js anywhere you like by importing it like this:

import { Chart } from ‘chart.js’;

As I mentioned before, Chart.js uses an HTML5 canvas element to display the charts, so we will need to set that up in our template first.

so that we can easily grab a reference to it from our TypeScript file (which we will do very shortly).

We are also going to add a bit of styling to this template to make it look a little nicer.

.ios, .md { page-home { .scroll-content { background-color: map-get($colors, light); } ion-card-header { font-weight: bold; } } }

Now all we need to do is generate the graphs. I’m going to use some sample code for the documentation to set up three graph examples, if you would like to know what other options are available you can take a look at the documentation.

Let’s start off by just creating the bar chart.

with an object that defines the type of chart we want, and the type of data we want to display.

The bar chart should be displayed in your application now. Let’s finish it up by adding two more examples.

Now we have added a doughnut chart and a line chart. These both use exactly the same method as we used for the bar chart, except that we supply a different configuration in the object that we supply.

Getting charts set up in your Ionic 2 applications with Chart.js only takes a matter of minutes, but it is also an in-depth library with plenty of advanced customisations. So, if you’re just looking to display a simple chart, or you want to do something more advanced, Chart.js should be a good option in many situations.

Adding Responsive Charts & Graphs to Ionic 2 Applications

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.