Adding Charts in Ionic 4 apps and PWA: Part 3 — Using HighCharts

This is part 3 of a 4 part series regarding how to create charts in Ionic 4 apps. In this Part 3, you’ll learn how to create various types of Charts using HighCharts in Ionic 4 Apps and PWA

(Part 1 — Adding Charts in Ionic 4 apps and PWA : Part 1 — Using Chart.js)
(Part 2 — Adding Charts in Ionic 4 apps and PWA : Part 2 — Using D3.js)
(Part 4 — Adding Charts in Ionic 4 apps and PWA : Part 4 — Using Google Charts)

In these posts, you’ll learn how to add and play with different types of charts in Ionic 4 apps. We will explore several alternatives for Charting i.e. Chart.js, D3.js, Highcharts, GoogleCharts and others.

Complete source code of this tutorial is available here — Ionic-4-highcharts

What is Ionic 4

I know most of the readers reading this blog will know what is Ionic 4, but just for the sake of beginners, I explain this in every blog.

Ionic is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.

In other words — If you create native apps in Android, you code in Java. If you create native apps in iOS, you code in Obj-C or Swift. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.

What is HighCharts

Highcharts is a pure JavaScript based charting library meant to create interactive charts in web applications. Highcharts provides a wide variety of charts, similar to ChartJS. For example, line charts, spline charts, area charts, bar charts, pie charts and so on. This post will explain the basics of Highcharts along with examples. You can find a few demo examples below.

In user rankings, HighCharts ranks in top 5 charting libraries, and for good reasons. Here are some advantages with HighCharts

• Provides 20 different types of charts to choose from, and it is easy to combine these as well
• Lots of good examples available, along with clear documentation
• It has a great community, so if you get stuck you’ll find help easily

But there are some downsides of HighCharts as well

• HighCharts is not entirely free. It is paid for commercial purposes and the license starts from $510 for single developer 😐

Nevertheless, it is a great charting library and in this post, we’re going to explore how easily we can create various charts in HighCharts.

Structure of the post

We’ll go about the post in a step-by-step manner

1. Create a basic Ionic 4 app
2. Add HighCharts to the app
3. Create your first basic Bar Chart with HighCharts — understand concepts
4. Create simple Pie Chart with HighCharts
5. Create more advanced charts
6. Test your app on Android

Complete source code of this tutorial is available here — Ionic-4-highcharts

Step 1 — Create a basic Ionic 4 app

I have covered this topic in detail in this blog.

In short, the steps you need to take here are

• Make sure you have node installed in the system (V10.15.3 at the time of this blog post)
• Install ionic cli using npm (my Ionic version is 4.12.0 currently)
• Create an Ionic app using ionic start

You can create a sidemenu starter for the sake of this tutorial. On running ionic start ionic-4-highcharts sidemenu , node modules will be installed. Once the installation is done, run your app on browser using

$ ionic serve

The app will launch on browser. You can go to Inspect → Device Mode to see the code in a mobile layout. Next we’ll add the HighCharts library to our app.

Step 2 — Add HighCharts to the app

To create charts/visualizations you need to add HighCharts library to the app. Add the library from npm package

npm install highcharts --save

This will install the library in your node modules. Now you can import different modules of the library in your page using import syntax. You can import HighCharts in your pages and components using

import * as HighCharts from 'highcharts';

That’s it ! You are ready to use HighCharts in your app and PWA pages.

Step 3 — Create basic Bar chart with HighCharts

HighCharts uses HTML5 / CSS and SVGs (internally) to create charts and visualizations in HTML5. You’ll also see a highcharts.com marker at the bottom of each map.

We will add a simplediv in the HTML page of our app’s page, and access that div in the page.ts file to include our chart. We don’t have to manipulate any SVGs ourselves, as HighCharts takes care of it automatically. That’s the benefit of HighCharts over Chart.js (SVGs) and D3.js (don’t have to manipulate SVGs manually).

Let’s add a simple divelement in HTML called barChart

Next we’ll import HighCharts in bar.page.ts page. Here we’ll also access the highcharts div in HighCharts’s method, and then provide our data and chart options. Complete code to create a simple bar chart would be

You can see creating charts in HighCharts is pretty similar to Chart.js, and it gives the benefit of SVGs with that. Let’s see some of the options

• Chart → type — defines the type of the chart
• Title — gives the chart title, no extra css required
• xAxis, yAxis — Axes options
• xAxis → categories — To define columns of bar chart
• series — data of the chart

Important — At present, for each chart series data, you need to add type: undefined , otherwise the code just doesn’t work. You are supposed to enter the correct type of the series data, but I’m still figuring this one out.

The Bar chart will look like this. Pretty cool, right !

It’s pretty easy to create Stacked bar chart and bar chart with negative values as well. HighCharts takes care of most of the things itself.

For stacked bar chart, you need to add this to HighCharts option JSON

plotOptions: {
series: {stacking: 'normal'}
}

For negative value bar chart, you don’t have to do anything. HighCharts takes care of negative values automatically.

There are other cool features you can implement in bar charts using HighCharts like

Fixed Placement Columns

Column Range Charts

Step 4 — Create basic Pie chart with HighCharts

Pie chart creation is very similar to Bar chart in HighCharts. Simply change a few options and you are good to go.

Create a div element with id pieChart in your HTML. Then the complete TS code for a sample Pie chart will look like following

The Pie chart will look this

There are other cool features you can implement in pie charts using HighCharts like

Monochrome Pie Chart

Polar Area Chart or Variable Radius Pie Chart

Step 5 — Create basic Scatter chart with HighCharts

Creating scatter chart in HighCharts is as easy as creating any other chart. Just pick the correct div from the DOM and add HighCharts options to it. HighChart creation options will look like following

You’ll notice the major difference are in chart type

chart: {
type: 'scatter',
zoomType: 'xy'
},

and plotOptions now has

scatter → marker → radius options

Other than that, all options remain general. The scatter plot will look like following

Step 6 — Create Dynamic charts with HighCharts

Another good feature in HighCharts is that it can very well handle dynamic charts. Let’s take a simple example where a new point is added to a line chart every second.

For this, we can use events option of HighCharts option JSON. In events , we call load function, and write our data fetching logic inside it. For demo purpose, we’ll create new points randomly at set intervals. In a real scenario, this will be replaced by an API response or socket response.

events: {
load: function () {
// set up the updating of the chart each second
}
}

We’ll create a Spline chart with dynamic data. Spline chart is not covered in this blog, but you’ll see it is pretty similar to other charts. Complete code to create a dynamic spline chart is as follows

Note some important things in this chart

• type : ‘spline’ — creates spline chart
• animation : true — allows animation
• events → load — function loads new point in the dataset every 1 second with series.addPoint()
• Initial data is also created randomly

The resultant dynamic spline chart looks like following

Step 6 — Test your app in Android and as PWA

We have already tested the above HighCharts charts in browser. If you have carried out the above steps correctly, Android build should be a breeze.

Run the following command to create Android platform

$ ionic cordova platform add android

Once platform is added, run the app on device (Make sure you have a device attached to the system).

$ ionic cordova run android

Once your app is up and running on the device, you can start testing all the functions.

Other cool charts possible in HighCharts

HighCharts has many other features and types of charts which you can create as easily as you created the above charts

Bubble Charts

Along with simple bubble charts, you can also create packed bubble charts like this one

Heat and Tree Maps

3D charts

Gauges

You can also create different styled gauges in HighCharts as well

Conclusion

In this post we learnt how to create simple charts using HighCharts in Ionic 4 apps and PWA. Since HighCharts is amazingly easy, you need to take very little effort to create a large variety of charts. The documentation on HighCharts website is good enough to simulate any type of chart in your projects.

In next post of this series, we’ll learn how to create charts in Ionic 4 using Angular Google charts and other libraries.

Complete source code of this tutorial is available here — Ionic-4-highcharts

Also check out other posts of this series,

(Part 1 — Adding Charts in Ionic 4 apps and PWA : Part 1 — Using Chart.js)
(Part 2 — Adding Charts in Ionic 4 apps and PWA : Part 2 — Using D3.js)
(Part 4 — Adding Charts in Ionic 4 apps and PWA : Part 4 — Using Google Charts)

— — — — — — — — — — — — — — — — — — — — — — — — — — -

Buy “Ionic 4 Chart App Starter — Ion Chart” today!!

— — — — — — — — — — — — — — — — — — — — — — — — — —